Currently, I have a page created using DIVI WordPress:
My issue arises when attempting to implement a zoom effect on images upon hovering, as the image exceeds its designated div area.
I attempted to utilize CSS code from this source: https://codepen.io/Remedy/pen/ZYJrpp
The CSS code I used that isn't functioning properly is displayed below:
.et_portfolio_image img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.et_portfolio_image:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
While utilizing Firefox browser, I inspected the element by right-clicking on the image to identify the assigned class. Despite trying various classes, the desired effect of zooming the background image without overlap and contained within the specified DIV hasn't been achieved.
Your guidance and suggestions would be greatly appreciated. Thank you!