图片鼠标悬浮特效
参考链接：http://blog.csdn.net/libin_1/article/details/50879505
http://www.cnblogs.com/libin-1/p/5770699.html
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0px;
margin: 0px;
color: red;
}
body {
width: 100%;
}
figure {
width: 33.33%;
height: 300px;
position: relative;
float: left;
overflow: hidden;
}
figure img {
width: 100%;
display: block;
}
figcaption {
width: 100%;
height: 100%;
transform: translateX(0px);
position: absolute;
left: 0px;
top: 0px;
}
figcaption * {
transition: all 1s ease-in;
}
/**********test1***********/
.test1 figcaption h2 {
transform: translateX(-100px);
}
.test1 figcaption p {
margin: 15px;
transition-delay: 0.5s;
transform: translateX(-100px);
}
.test1 img {
transition: all 1s;
}
.test1:hover img {
transform: scale(1.5);
}
.test1:hover figcaption h2 {
transform: translateX(30px);
}
.test1:hover figcaption p {
transform: translateX(30px);
}
/**********test2***********/
.test2 figcaption h2,
.test2 figcaption p {
text-align: center;
transform: translateY(100px);
}
.test2 figcaption div {
width: 80%;
height: 80%;
border: 2px solid red;
transform: translate(10%, -150%) rotate(0deg);
}
.test2:hover figcaption div {
transform: translate(10%, -10%) rotate(360deg);
}
/**********test3***********/
.test3 figcaption h2,
.test3 figcaption p {
text-align: center;
transform: translateY(100px) skew(90deg);
}
.test3:hover figcaption h2 {
transform: translateY(100px) skew(0deg);
}
.test3:hover figcaption p {
transform: translateY(100px) skew(0deg);
}
/**********test4***********/
.test4 figcaption h2,
.test4 figcaption p {
text-align: center;
transform: translateY(100px);
}
.test4 figcaption div {
width: 80%;
height: 80%;
border: 2px solid red;
transform: translate(10%, -10%) scale(1.3);
opacity: 0;
}
.test4:hover figcaption div {
opacity: 1;
transform: translate(10%, -10%) scale(1);
}
/**********test5***********/
.test5 figcaption h2,
.test5 figcaption p {
text-align: center;
transform: translateY(100px);
}
.test5 figcaption div {
width: 110%;
height: 100%;
border: 2px solid red;
position: absolute;
left: 0px;
top: 300px;
transform-origin: left top;
background: red;
}
.test5:hover figcaption div {
transform: rotate(-15deg);
}
/**********test6***********/
.test6 figcaption h2,
.test6 figcaption p {
text-align: center;
transform: translateY(100px);
}
.test6 figcaption div {
text-align: center;
font-size: 36px;
line-height: 60px;
color: red;
width: 100%;
height: 60px;
background: green;
position: absolute;
top: 300px;
left: 0px;
}
.test6 img {
transition: all 1s ease-in;
}
.test6:hover img {
transform: translateY(-60px);
}
.test6:hover figcaption div {
top: 240px;
}
/**********test7***********/
.test7 figcaption h2,
.test7 figcaption p {
text-align: center;
transform: translateY(100px);
}
.test7 .outter {
position: absolute;
top: 15%;
left: 10%;
width: 80%;
height: 70%;
border-top: 2px solid red;
border-bottom: 2px solid red;
opacity: 1;
transform: translateX(-500px);
}
.test7 .inner {
position: absolute;
top: 10%;
left: 15%;
width: 70%;
height: 80%;
opacity: 1;
border-left: 2px solid red;
border-right: 2px solid red;
transform: translateY(400px);
}
.test7:hover .outter {
transform: translateX(0px);
}
.test7:hover .inner {
transform: translateY(0px);
}
/**********test8***********/
.test8 figcaption h2,
.test8 figcaption p {
text-align: center;
transform: translateY(100px);
}
.test8 .outter {
position: absolute;
top: 15%;
left: 10%;
width: 80%;
height: 70%;
border-top: 2px solid red;
border-bottom: 2px solid red;
opacity: 1;
transform: rotateY(90deg);
}
.test8 .inner {
position: absolute;
top: 10%;
left: 15%;
width: 70%;
height: 80%;
opacity: 1;
border-left: 2px solid red;
border-right: 2px solid red;
transform: rotateX(90deg);
}
.test8:hover .outter {
transform: rotateY(0deg);
}
.test8:hover .inner {
transform: rotateX(0deg);
}
/**********test9***********/
.test9 figcaption h2,
.test9 figcaption p {
text-align: center;
transform: translateY(100px);
}
.test9 .outter {
position: absolute;
top: 15%;
left: 10%;
width: 80%;
height: 70%;
border-top: 2px solid red;
border-bottom: 2px solid red;
opacity: 1;
transform: skewX(90deg);
}
.test9 .inner {
position: absolute;
top: 10%;
left: 15%;
width: 70%;
height: 80%;
opacity: 1;
border-left: 2px solid red;
border-right: 2px solid red;
transform: skewY(90deg);
}
.test9:hover .outter {
transform: skewX(0deg);
}
.test9:hover .inner {
transform: skewY(0deg);
}
/**********test10***********/
.test10 figcaption{
transition: all 1s;
transform: translateY(250px);
background: rgba(0,0,0,0.8);
}
.test10 figcaption h2,
.test10 figcaption p {
text-align: center;
line-height: 35px;
transform: translateY(10px);
}
.test10:hover figcaption{
transform: translateY(0px);
}
.test10:hover figcaption h2{
transform: translateY(80px);
}
.test10:hover figcaption p{
transform: translateY(80px);
}
</style>
</head>
<body>
<figure class="test1">
<img src="img/class1.jpg" />
<figcaption>
<h2>图片标题</h2>
<p>图片描述1</p>
<p>图片描述2</p>
<p>图片描述3</p>
</figcaption>
</figure>
<figure class="test2">
<img src="img/class2.jpg" />
<figcaption>
<h2>旋转动画</h2>
<p>飞来飞去，飞来飞舞</p>
<div></div>
</figcaption>
</figure>
<figure class="test3">
<img src="img/class3.jpg" />
<figcaption>
<h2>斜切动画</h2>
<p>斜切动画，变形显示</p>
</figcaption>
</figure>
<figure class="test4">
<img src="img/class4.jpg" />
<figcaption>
<h2>缩放动画</h2>
<p>缩放动画，缩放显示</p>
<div></div>
</figcaption>
</figure>
<figure class="test5">
<img src="img/class5.jpg" />
<figcaption>
<h2>旋转</h2>
<p>酷酷的旋转</p>
<div></div>
</figcaption>
</figure>
<figure class="test6">
<img src="img/class6.jpg" />
<figcaption>
<h2>复合</h2>
<p>感觉萌萌的</p>
<div>this is my page!</div>
</figcaption>
</figure>
<figure class="test7">
<img src="img/class1.jpg" />
<figcaption>
<h2>复合</h2>
<p>感觉萌萌的</p>
<div class="outter"></div>
<div class="inner"></div>
</figcaption>
</figure>
<figure class="test8">
<img src="img/class2.jpg" />
<figcaption>
<h2>复合</h2>
<p>感觉萌萌的</p>
<div class="outter"></div>
<div class="inner"></div>
</figcaption>
</figure>
<figure class="test9">
<img src="img/class3.jpg" />
<figcaption>
<h2>复合</h2>
<p>感觉萌萌的</p>
<div class="outter"></div>
<div class="inner"></div>
</figcaption>
</figure>
<figure class="test10">
<img src="img/class3.jpg" />
<figcaption>
<h2>复合</h2>
<p>感觉萌萌的</p>
<div class="outter"></div>
<div class="inner"></div>
</figcaption>
</figure>
</body>
</html>
