答案 0 :(得分:0)
如果您想为图片添加幻灯片效果,可以使用CSS3
HTML:
<div class="hover column">
<div>
<figure><img src="surce/pic01.jpg" /></figure>
<span>Hover</span>
</div>
CSS:
.hover figure img {
margin-left: 30px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
这会给你一个幻灯片效果。
答案 1 :(得分:0)
.media{
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
}
.media img{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition: all ease .5s;
}
.media:hover img{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.overlay{
background: rgba(0,0,0,.5);
visibility: hidden;
opacity: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1;
}
.media:hover .overlay{
visibility: visible;
opacity: 1;
}
.link{
position: absolute;
padding: 15px;
border: 1px solid #fff;
color: #fff;
transition: all .5s ease;
left: 50%;
top: 50%;
transform: translate(-50%, 0);
}
.media:hover .link{
transform: translate(-50%, -50%);
}
&#13;
<div class="media">
<div class="overlay">
<a href="" class="link">Link</a>
</div>
<div class="media-image">
<img src="http://lorempixel.com/200/200/nature/" class="img-responsive" alt=""></div>
</div>
&#13;