1. 效果图
鼠标未放在图片上时显示图片,鼠标悬停在任意一副图片上时图片翻转,显示文字
2. 思路
设置四个父层div标签,每个父层div包含图片和文字,舞台div表标签包含四个父层div标签。
这里的主要问题是图片盒子和文字盒子的摆放问题,一开始显示的是图片,翻转后是文字,因此我们让图片盒子和文字盒子重叠在一起,图片盒子在上层,文字盒子在下一层,如何使两张图片重合在一起呢?我们设置父层div为相对定位,子层图片和文字盒子为绝对定位,定位的上下左右属性四个方向值不设定默认为0,这样可以实现两个盒子的重叠。
那么如何实现图片在上盒子在下呢?在两个盒子重叠后,我们对文字盒子使用一个翻转功能,这里需要注意在父层div内图片盒子先写在前,文字盒子写在后,这样的话对文字实现一个翻转后它就跑到图片盒子下面,实现了图片在上文字在下后,再对包含图片和文字的盒子使用一个翻转功能,即可实现上述功能,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color:#0D3462;
}
/*舞台*/
#piclist{
width:760px; /*170*4+10*8*/
height: 220px;/*190+边框*/
margin: 100px auto;
}
/*容器*/
.picbox{
float: left;
position: relative;
width: 170px;
height: 190px;
margin: 10px;
/*3d——双面效果*/
transform-style:preserve-3d;
transition:1.5s;
}
/*舞台鼠标悬停,就翻转,
正面背面互换*/
.picbox:hover{
transform:rotateY(180deg);
}
.face{
position: absolute;
width:170px;
height:190px;
}
.front{
border:2px solid #4b2518;
}
.back{
/*让它成为背面,开始只显示正面*/
transform:rotateY(180deg);
background-color: #4b2518;
border:2px solid #fff;
}
.back h3{
color:white;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="piclist">
<div class="picbox">
<div class="face front"><img src="images/1.jpg"></div>
<div class="face back"><h3>浓缩咖啡</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="images/2.jpg"></div>
<div class="face back"><h3>卡布奇诺</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="images/3.jpg"></div>
<div class="face back"><h3>拿铁</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="images/4.jpg"></div>
<div class="face back"><h3>摩卡</h3></div>
</div>
</div>
</div>
</body>
</html>
那么如果在父层div内,文字写在前,图片写在后,不对文字使用翻转,这样也能使图片在上层,文字在下层,但是经过测试,这里鼠标悬停在图片上翻转还是图片,文字不见了,但若对在下层的文字使用翻转,这样却是可行的,这里推测的解释是如果不对下面的图层进行一定的操作,那么在同一个父容器内写在后面的盒子会覆盖掉前面的盒子,