Image rollover effect - css

Question

I am all new to CSS and CSS animation and I have been curious how to achieve the image rollover effects used here: http://riot.design/portfolio/
Anyone kind enough to show me how its done?
Thank you in advance!

Answer 1

If you want a Slide effect for a Picture you can use 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;
}
That gives you a slide effect.

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">
Link
</div>
<div class="media-image">
<img src="http://lorempixel.com/200/200/nature/" class="img-responsive" alt=""></div>
</div>