javascript - CSS Hover: Reduce image box + zoom image

Question

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

question from:https://stackoverflow.com/questions/65921527/css-hover-reduce-image-box-zoom-image

Answer 1

On hover we crop the size of the parent container and at the same time we scale a child image. That's it.

Please, check this at codepen:

css

div {
  max-width: 300px;
  transition: all ease 0.5s;
  clip-path: inset(0 0 0 0);
}
img {
  display: block;
  width: 100%;
  transition: transform ease 0.5s;
}
div:hover {
  clip-path: inset(12px 12px 12px 12px);
}
div:hover img {
  transform: scale(1.05);
}

html:

<div>
  <img alt="image" src="https://solene.qodeinteractive.com/wp-content/uploads/2019/11/h1-port-feauture-img-2.jpg"/>
</div>