<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=device-width,inatial-scale=1">
<title>css3圖片動態提示效果</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<figure class="test1">
<img src="img/1.jpg">
<figcaption>
<h2>圖片標題</h2>
<p>圖片註解</p>
<p>圖片註解</p>
<p>圖片註解</p>
</figcaption>
</figure>
<figure class="test2">
<img src="img/1.jpg">
<figcaption>
<div></div>
<h2>旋轉動畫</h2>
<p>飛來飛去</p>
</figcaption>
</figure>
<figure class="test3">
<img src="img/1.jpg">
<figcaption>
<h2>斜切動畫</h2>
<p>圖片註解</p>
<p>圖片註解</p>
</figcaption>
</figure>
<figure class="test4">
<img src="img/1.jpg">
<figcaption>
<div></div>
<h2>圖片縮放</h2>
<p>圖片註解</p>
<p>圖片註解</p>
</figcaption>
</figure>
<figure class="test5">
<img src="img/1.jpg">
<figcaption>
<span>這是一張圖片</span>
<div></div>
<h2>旋轉</h2>
<p>利用旋轉提供額外信息</p>
</figcaption>
</figure>
<figure class="test6">
<img src="img/1.jpg">
<figcaption>
<div class="one"></div>
<div class="two"></div>
<h2>縮放</h2>
<p>縮放的簡單應用</p>
</figcaption>
</figure>
</body>
</html>
css文件：
figure{
position: relative;
width: 33.33%;
height: 350px;
float: left;
overflow: hidden;
}
figure p, figure img,figure span,figure div{
transition:all 0.35s;
}
figure img{
height: 350px;
width: 100%;
max-width: 100%;
}
figure img{
opacity: 0.8;
}
figcaption{
position: absolute;
top: 0;
left: 0;
color: #fff;
}
.test1{
background-color: red;
}
.test1 figcaption p{
background-color: #fff;
color: #2F0000;
margin: 3px;
text-align: center;
transform: translateX(-120px);
}
.test1:hover figcaption p{
transform: translateX(0);
}
.test1 figcaption{
padding:20px;
}
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s
}
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.1s
}
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s
}
.test1:hover img{
transform: translateX(-50px);
opacity:0.5;
}
.test2{
background-color: #030;
}
.test2 figcaption{
width: 100%;
height: 100%;
}
.test2 figcaption p{
transform: translateY(45px);
opacity: 0;
}
.test2 figcaption div{
border: 2px solid #fff;
width: 80%;
height:80%;
/*margin: 10% auto;*/
position: absolute;
top: 10%;
left: 10%;
transform: translateY(-400px) rotate(0deg);
}
.test2:hover figcaption div{
transform: translateY(0) rotate(-360deg);/*要設置初始值*/
}
.test2:hover figcaption p{
transform: translateY(0);
opacity: 1;
}
.test2:hover img{
opacity: 0.5;
transform: translateX(-50px);
}
.test2 figcaption h2{
margin-top: 15%;
margin-left: 15%;
}
.test2 figcaption p{
margin-left: 15%;
margin-top: 3px;
}
.test3{
background-color: #000;
}
.test3:hover img{
opacity: 0.5;
}
.test3 figcaption{
top: 30%;
left: 15%;
}
.test3 figcaption h2,.test3 figcaption p{
transform: skew(90deg);
}
/* h2不會斜切?*/
.test3 figcaption p{
margin-top: 5px;
margin-left: 15%;
}
.test3:hover figcaption h2,.test3:hover figcaption p{
transform: skew(0deg);
}
.test4{
background-color:#000;
}
.test4:hover img{
opacity: 0.5;
transform: scale(1.2,1.2);
}
.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.3,1.3);
}
.test4 figcaption h2{
margin-top: 15%;
}
.test4 figcaption P,.test4 figcaption h2{
margin-left: 15%;
transform: scale(1.2,1.2);
opacity: 0;
}
.test4:hover figcaption P,.test4:hover figcaption h2{
transform: scale(1.0,1.0);
opacity: 1;
}
.test4 figcaption img{
transform: scale(1.0,1.0);
}
.test4:hover figcaption div{
transform: scale(1.0,1.0);
}
.test5{
background-color: #000;
}
.test5:hover img{
opacity: 0.5;
}
.test5 figcaption h2{
margin-top: 10%;
}
.test5 figcaption p,.test5 figcaption h2{
width: 100%;
margin-left: 20%;
transform: translateY(20px);
opacity: 0;
}
.test5:hover figcaption p,.test5:hover figcaption h2{
transform: translateY(0);
opacity: 1;
}
.test5 figcaption{
width: 100%;
height: 100%;
transform-origin: left bottom;
}
.test5 figcaption div{
border: 2px solid #fff;
border-left: none;
border-right: none;
/*border-bottom: none;*/
width: 120%;
height:200px;
opacity: 0.4;
background-color: #fff;
position: absolute;
top:350px;
transform-origin: left top;
transform: rotate(0deg);
color: red;
}
.test5 figcaption span{
display: block;
color: #fff;
position: absolute;
left: 60%;
bottom: 80px;
opacity: 0;
transform: translateY(200px);
}
.test5:hover figcaption span{
transform: translateY(40px);
opacity: 1;
transition-delay: 0.2s;
}
.test5:hover figcaption div{
transform-origin: left top;
transform: rotate(-15deg);
}
.test6{
background-color: #000;
}
.test6:hover img{
opacity: 0.5;
}
.test6 figcaption{
width: 100%;
height: 100%;
}
.test6 figcaption h2{
margin-top: 20%;
}
.test6 figcaption p,.test6 figcaption h2{
margin-left: 20%;
transform: scale(0,0) rotate(0deg);
}
.test6:hover figcaption p,.test6:hover figcaption h2{
margin-left: 20%;
transform: scale(1.2,1.2) rotate(360deg);
transition-delay: 0.15s;
}
.test6 figcaption div.one{
position: absolute;
top: 10%;
left: 15%;
width: 70%;
height: 80%;
border: 1px solid #fff;
}
.test6 figcaption div.two{
position: absolute;
top: 15%;
left: 10%;
width: 80%;
height: 65%;
border: 1px solid #fff;
}
.test6 figcaption div.one{
border-bottom: none;
border-top: none;
transform: scale(0,0) rotate(0deg);
}
.test6:hover figcaption div.one{
transform: scale(1.2,1.2) rotate(360deg);
}
.test6 figcaption div.two{
border-right: none;
border-left: none;
transform: scale(0,0) rotate(0deg);
}
.test6:hover figcaption div.two{
transform: scale(1.2,1.2) rotate(360deg);
/*transition-delay: 0.25s;*/
}
@media screen and (min-width: 1001px) {
figure{
width: 33.33%;
}
}
@media screen and (min-width: 500px) and (max-width: 1001px) {
figure{
width: 50%;
}
}
@media screen and (max-width: 500px) {
figure{
width: 100%;
}
}
