FIG. 1. Effect
Display image when mouse is not on the picture, when the mouse hovers over any set of pictures picture flip, display text
2. Ideas
Set four Parent div tags, each parent div layer contains images and text, the stage table div tag contains four layers father div tag.
The main issue here is the question put picture boxes and text boxes, a picture is beginning to show, flip text, so we let the picture boxes and text boxes overlap, the next layer in the upper picture box, text box, how to make the two images overlap together? We set the relative positioning Parent div sublayers pictures and text boxes for the absolute positioning, the positioning of the vertical and horizontal four directions attribute value is not set to 0 by default, so that two overlapping boxes can be achieved.
Then how to achieve it in the next picture on the box? After two overlapping boxes, text boxes we use a flip feature to note here within the parent div layer picture box to write first, write text box in the post, so to achieve a text flipped it ran pictures the following boxes, pictures realized after the next character, and then use a flip function box contains images and text, to achieve the above functions,
<!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>So if the parent layer in the div, first write the text, written in the picture, the text does not use the flip, which would also make the picture in the upper, lower in the text, but after testing, where hovering over the picture or image flip, text missing, but if the interpretation of the text in the lower flip, so it is possible, if not here speculated that the layer below a certain operation, then within the same parent container will be written on the back cover of the box off the front of the box,
