CSS:
body, figure, figcaption {
margin: 0;
padding: 0;
}
figure {
position: relative;
width: 33.33%;
height: 350px;
overflow: hidden;
float: left;
}
figcaption {
position: absolute;
top: 0px;
left: 0px;
color: #fff;
font-family: "微软雅黑";
}
figure img {
opacity: 0.9;
transition: all 0.35s;
}
figure figcaption p, h2, span, div {
transition: all 0.35s;
}
.test4 {
background:#000;
}
.test4 figcaption {
width:100%;
height:100%;
}
.test4 figcaption div {
border: 2px solid #FFF;
width: 80%;
height: 80%;
position: absolute;
top: 10%;
left: 10%;
transform:scale(1.5);
}
.test4 figcaption h2 {
margin-top:10%;
margin-left:15%;
}
.test4 figcaption p {
margin-left:15%;
}
.test4:hover figcaption div{
transform:scale(1);
}
.test4:hover figcaption h2{
transform:scale(0.8);
}
.test4:hover figcaption p{
transform:scale(0.8);
}
.test4:hover img {
transform:scale(1.1);
opacity:0.5;
}
body:
<figure class="test4">
<img src="phto/29358PICQjG_1024.jpg" />
<figcaption>
<h2>图片缩放效果</h2>
<p>图片注解</p>
<div></div>
</figcaption>
</figure>