Test Blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae ligula laoreet, malesuada augue sit amet, iaculis nibh. Curabitur mollis pellentesque sapien, et faucibus risus maximus sit amet. Morbi et sollicitudin velit, ornare fringilla dui. Fusce gravida...
It turns out that it is also very easy to do this with Divi Blog modules, so long as they are in GRID layout. This is because the featured image is already sitting inside a container that can be used to constrain the zoom. So, any expansion of the image is hidden. The effect can be seen on the left. Just hover over the image to see the zoom.
Here’s the CSS we used. Be sure to ‘apply’ this new class to the blog modules you want to add the zoom to, by entering the zoom-blog class name in the CSS Class field on the Advanced Design Settings.
.zoom-blog .et_pb_post img {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
.zoom-blog .et_pb_post:hover img {
transform:scale(1.05);
-moz-transform: scale(1.05);
-webkit-transform:scale(1.05);
}
.zoom-blog a.entry-featured-image-url {
overflow:hidden;
}
Just be aware, this code will only work for Blog Modules in GRID format. It will not work for FULLWIDTH Blog Modules.
So this code is very simple. All that is happening is that the length of the transition is being set up (0.5 seconds), then the zoom effect is being set (by using a scale). Lastly, the a.entry-featured-image-url, that the image sits inside, has its overflow constrained to hide the expansion of the image.
One cunning thing that the above CSS does is to attach the hover to the entire blog. It does this by using .zoom-blog .et_pb_post:hover img. In other words, the hover is on the whole of the post and not just on the image. If we had used .zoom-blog .et_pb_post img:hover the zoom effect would only have fired when we hovered over the image.
Note, in previous versions of Divi, a.entry-featured-image-url does not exist. To get this code to work in these versions, replace the .zoom-blog a.entry-featured-image-url clause with –
.zoom-blog .et_pb_post div.et_pb_image_container {
overflow:hidden;
}
Thank you. I’ve been trying to do this for the two days and if worked perfectly after I realized I needed to add the CSS class.
Thank you Garnette for pointing this out. I have amended the article to make this clearer. I really appreciate the feedback. Glad the article was useful to you.