图像翻转效果

时间:2015-11-05 08:07:32

标签: css css-animations

我是CSS和CSS动画的新手,我很好奇如何实现此处使用的图像翻转效果:http://riot.design/portfolio/

任何人都可以告诉我它是如何完成的?

提前谢谢!

2 个答案:

答案 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)

&#13;
&#13;
.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;
&#13;
&#13;