图片翻转效果

Question

我所有的新的CSS和CSS动画，我一直好奇如何实现在这里所使用的图像翻转效果：http://riot.design/portfolio/

任何人都热情地向我展示如何做？

预先感谢您！

Answer 1

如果你想对图片的幻灯片效果，你可以使用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; 
} 

这就给了你一个幻灯片效果。

Answer 2

.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%); 
 
}

<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>