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.
