Image rollover effect

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