猜猜我是谁？
效果图
HTML+CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2023年9月15日</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img.i1:hover{
transform: scale(1000%)
}
#message{
background-color: antiquewhite;
width: 1140px;
margin: 30px auto;
padding: 30px;
overflow: hidden;
}
#message > div.mc1{
width: 360px;
height: 200px;
margin: 80px 10px;
background-color: aqua;
float: left;
line-height: 200px;
text-align: center;
font-size: 30px;
border-radius: 30px;
}
#message > div.mc1 > span{
display: none;
}
#message > div.mc1 > span.mcs{
display: block;
}
#message > div.mc1:hover > span{
transform: scale(1.2);
background-color: blue;
display: block;
color: white;
}
#message > div.mc1:hover > span.mcs{
display: none;
}
</style>
</head>
<body>
<h3 style="text-align: center; margin: 30px;">猜猜我是谁？</h3>
<div id="message">
<div class="mc1">
<span class="mcs">01猜猜我是谁？</span>
<span>张三</span>
</div>
<div class="mc1">
<span class="mcs">02猜猜我是谁？</span>
<span>李四</span>
</div>
<div class="mc1">
<span class="mcs">03猜猜我是谁？</span>
<span>王五</span>
</div>
<div class="mc1">
<span class="mcs">04猜猜我是谁？</span>
<span>赵六</span>
</div>
<div class="mc1">
<span class="mcs">05猜猜我是谁？</span>
<span>小王</span>
</div>
<div class="mc1">
<span class="mcs">06猜猜我是谁？</span>
<span>大王</span>
</div>
</div>
</body>
</html>