You’ve probably seen that effect where if you hover over an image it enlarges. Here’s how to get it:
Be sure to give the div that your image is in a class like “enlarge”. That’s what I used below. Then add this to your CSS:
.elarge img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.enlarge img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
You can see this affect at the top of the page here:
http://ahlberrien.com/team/
Emilio says
Hi,
Don’t know where to place that code. Website: https://buenaestrella.es
regards
Laura Hartwig says
It goes in your CSS. Most likely in the style.css file. In your dashboard, go to Appearance > Editor and then put this at the very bottom of your style.css file, which should be the default file to edit there. Let me know if that works!
Volta says
Hello,
Any way to make the transition smoother? To make it slow down towards the end of transition.
Thanks for the code!
Laura Hartwig says
Lots of options to customize it. You just have to play around with the values. See this as a guide: https://www.w3schools.com/css/css3_transitions.asp
M says
I know this is an old thread but it just solved my issue – thanks very much!
Laura Hartwig says
I’m glad it helped! Thanks for letting me know!