CSS Hover: Reduce image box + zoom image

I hope someone can help me. I want to animate an image with a hover effect using WordPress. If you move the mouse over the image, the image should enlarge, but the image box should decrease at the same time.

Here is an example of how I imagine it:

https://solene.qodeinteractive.com/ (If you scroll down to Authentic Photos)

So far I have placed the image in wordpress and inserted the following code in custom css:

.elementor-5528 .elementor-element.elementor-element-e19f93f .elementor-image img:hover {
   width: 100%;
   height: auto;
   -webkit-transform: scale (1.3);
   transform: scale (1.2);
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}

However, the image including the image box is now enlarged. What else do I have to add so that the image box does not increase in size with the image, but rather decreases in size?
I would be very grateful if someone can help me.

Best regards,
Julia

21 thoughts on “CSS Hover: Reduce image box + zoom image”

  1. 106623 459346Couldn?t be produced any greater. Reading this post reminds me of my old room mate! He always kept talking about this. I will forward this report to him. Pretty certain he will possess a great read. Thanks for sharing! 489136

    Reply

Leave a Comment