Zoom into picture on hover with CSS

0
94

A lot of website use nice effects when hovering over pictures. The most common one is zooming a little bit into the picture. This can be accomplished with only a few lines of HTML and CSS.

The result will look like this:


HTML-Code

<a href="http://nddt-webdevelopment.de/2016/12/28/zoom-picture-hover-css/">
    <figure class="hover">
        <img src="testpicture.jpg" class="img-responsive" />
    </figure>
</a>

I’m assuming that you are using bootstrap. If you aren’t using bootstrap you can remove the class img-responsive but you have to handle the sizing of your image yourself.

CSS-Code

figure {
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
.hover img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

It is important to set the container surrounding the image (here the <figure>) to overflow: hidden. That way we can just resize the image and the edges are automatically cut off.

In this example I’m increasing size by 5%. You can play arround with it a little bit. I prefere small changes.

Of course you can use the same idea to create a zoom-out effect. Just set the standart-size to slightly enlarged and reduce it on hover. Do you want to see another hover-effect? Ask about it in the comments.

LEAVE A REPLY

Please enter your comment!
Please enter your name here