Adding a zoom effect to an image on hover isn’t enormously difficult and it creates interest and, if you have a link on the image, gives some visual feedback. Here’s a very simple example –
…and it is very easy to do. Just pop this code into your child style.css or into Divi -> Theme Options -> General -> Custom CSS
.image-zoom img {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
.image-zoom img:hover{
transform:scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform:scale(1.1);
}
Then ‘attach’ the image-zoom class to any images you want to zoom by entering the class name into the CSS Class field on the Advanced Design Settings for each image.
All good so far 🙂 But what if you don’t want the image to actually expand? It would look more ‘zoom-like’ if it didn’t do this. It is also in danger of interacting with objects around it if it expands. You can constrain the zoom by hiding the overflow. Add this to your previous CSS…..
.image-zoom-constrained {
overflow:hidden;
}
and add this new additional class to the image CSS Class as well –
and this is what happens….
ok… well that’s half right 🙂 In fact, if you use Inspect you can see what the issue is…. In Google Chrome, right click on the image and select ‘Inspect’ from the bottom of the drop down menu. You will see some new palettes appear on the right. The image should be highlighted both on the website and in the palette where it’s code is highlighted. If you carefully move the mouse to the palette and move it over the text above the image that I have highlighted here….. you should see that the blue box expands….
What you are doing by moving the mouse between the ‘img’ and the ‘div class et_pb_module’ in the right hand palette is showing where these elements appear on the website page (on the left). The image (img) is sitting inside an et_pb_module element and this is as wide as the row. That’s why the image, when zoomed. is constrained in the vertical but not in the horizontal.
Interestingly, you can see this effect disappear if you use a three column row. By doing this you reduce the width of the et_pb_module elements. All three images below and are sitting inside their own et_pb_module element. These et_pb_module ‘containers’ are now 1/3 of the row wide. As it happens, you still have the problem if you only have two columns.
In fact, what is happening here is that introducing more columns into the row has itself constrained the width of each of the et_pb_module elements so that they are actually narrower than the images. So, the images are resized to fit the narrower et_pb_modules and there is no ‘spare’ space around them for the image to expand into. You should be able to see this if you use Inspect again.
That makes sense but it’s a bit awkward to only be able to use this in three column rows!
I think one way to fix this is to set an upper limit on the size of the image itself. You can do this in the image module by setting Image Max Width in the Advanced Design Settings. Or, you can add a little more CSS….
.image-zoom-width-300 {
max-width:300px;
}
Note though, that this is not being applied to the image, but to the <div> element that contains the image. It is this container whose size is being restricted.
Of course, you then have to also remember to add this extra class again to your CSS Class field for each image.
A couple of points to end with…. you can, of course, combine all of the CSS above so that you only need to use a single class name –
.image-zoom {
overflow:hidden;
max-width:300px;
}
.image-zoom img {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
.image-zoom img:hover{
transform:scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform:scale(1.1);
}
This would save a bit of typing but you could argue that there are advantages to keeping these as separate classes in some circumstances. More problematically perhaps, you are hard-wiring the image size into the CSS. This means that on resize, your images may not play so nicely with the objects around them…. You could consider managing the resizing yourself with something like…
/* above 1400 the default sizes are used */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
/* tablets and desktop */
.image-zoom {
max-width:250px !important;
}
}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
/* tablets and desktop */
.image-zoom {
max-width:220px !important;
}
}
@media only screen and (min-width: 980px) and (max-width: 1099px) {
/* tablets and desktop */
.image-zoom {
max-width:200px !important;
}
}
/* below 980 Divi takes moves to a single column layout */
@media only screen and (max-width: 979px) {
/* landscape phones */
}
@media only screen and (max-width: 979px) and (orientation: portrait) {
/* portrait phones */
}
You are going to have to fiddle with the numbers to get this to work for your site…. In effect, what you are doing here is reducing the size of the images by hand as the page narrows.
I did also consider applying the image-zoom class to the ROW rather than to the Divi image module but it’s not difficult to think of scenarios where you have multiple images in a row but do not want to apply the zoom to all of them. So best, I think, to apply this to individual images. If you do want to use this on a row…. you need this instead of the above…. and you need to apply the image-zoom class to the row module CSS Class field rather than to the images themselves….
.image-zoom .et_pb_image {
overflow:hidden;
max-width:300px;
}
.image-zoom img {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
.image-zoom img:hover{
transform:scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform:scale(1.1);
}
Finally, just be aware that the above is intended to be used with the Divi Image Module and is unlikely to work with other Divi modules that contain images, such as Divi Gallery Modules.
Hi, I managed to get the gallery image hover zoom somehow… Here’s the code:
.et_pb_gallery_image img {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
.et_pb_gallery_image:hover img {
transform:scale(1.1);
-moz-transform: scale(1.1);
}
Genius! Works perfectly, many thanks for posting that.
Thanks for some great tips and explanations. How about shrinking the images to 0.9 first and expanding back to normal on hover? That seems to work great for me.
.image-swell img {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
transform:scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform:scale(0.9);
}
.image-swell img:hover{
transform:scale(1.0);
-moz-transform: scale(1.0);
-webkit-transform:scale(1.0);
}
Thank you John. Glad you found the article useful. Your CSS looks good John but does it hide the overflow??
Great article! Quick question, I would like to have the very first grow code placed on my logo so my logo will grow when I hover over it. How can this be done?
For your logo, you don’t want the overflow to be hidden so the code is simpler….. and you can just target the logo directly….. so something like this might work. Good luck with it. Glad you liked the article….
img#logo {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
img#logo:hover{
transform:scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform:scale(1.1);
}
What does it mean “the overflow to be hidden”.
I dont understand css language that well, iam not a programmer.
(and english is not my native language)
Hi Moritz,
Thanks for your comment and for your interest in the article. The image is scaled (made bigger) when you move the mouse over it. When the image gets bigger, the overflow is the part of the image outside of its original border. Overflow hidden means that, as the image scales, the ‘growth’ outside of the original border is hidden. Without this, the image would just get bigger. Hiding the overflow makes it look more like the image is zoomed in. Does this help Moritz?
All the best.
clark
Hello, this code works perfectly, many thanks. I don’t know a lot about HTML and CSS but I manage to use it when it is very well explained, as you did. I have a question though, would it be possible to add text to this effect? Let me explain myself: when I rollover the image, I would like to have some text to appear as well as the zoom effect. Is it possible? Thank you!
Hi Léane, so pleased this article was useful. Thank you for taking the time to leave a comment. I have used the zoom and a text overlay in websites by combining this article with the approach taken in my article – Adding a Striped Title On Top of An Image in Divi. You would also need to manipulate the opacity of the text overlay, when a mouse motion is detected. Does that help at all Léane?
Clark
Wow, this is great, thanks guys!
Really glad this was useful Matthew. Thank you for taking the time to comment 🙂
Clark
thank u very much sir…love from india
Glad you found the article useful 🙂
Great tutorial, I like it.
CEO: divisiteexamples.com
Thank you Shaukat. Glad you found it useful.
Love this – Thanks.
Is it possible to modify it slightly to be used with CTA images?
Hi Andrew, glad you found the article interesting. You can use it on CTAs, but only up to a point. The issue is that CTAs put the image onto the background of the CTA. Blurbs actually have their own DIV that contains the image. So, when you apply a scale, you have to apply it to the main CTA DIV, because that’s where the image is applied as a background. The consequences of this are that….. when you scale, you scale EVERYTHING including the content, the button etc. and you cannot easily constrain the scale like I did in the Blurb. When I want to put a button on an image…. I often place an image module and a button in a column and then change the position of the button so that it sits on top of the image…. this ‘disconnects’ the button from the image making it, I think, easier to do the sorts of things you are asking about…..
If you want to see how a CTA behaves, this is, I think, about as good as you are going to manage…..
.cta-zoom {
overflow:hidden;
}
.cta-zoom {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
.cta-zoom:hover{
transform:scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform:scale(1.1);
}
Hope this helps.