Enhance User Engagement with CSS Image Zoom Effects on Hover

Hello,
The image zoom feature is activated exclusively on images that are clickable.

Best regards,
Alaa

I still wanted to try, but I don't know the tag to include.

Thank you and greetings

Hello,
The below code will apply the image animation to any image inside the field name "field--type-text-with-summary"

@keyframes animateimg {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }

}
.field--type-text-with-summary img:hover {
  animation: animateimg 5s;
}

Breakdown of the CSS Code
@keyframes animateimg:
This is a keyframes rule named animateimg, which defines the animation sequence.
from { transform: scale(1); }: The animation starts (from) with the image at its original size (scale(1)).
to { transform: scale(1.1); }: The animation ends (to) with the image scaled to 110% of its original size (scale(1.1)). This creates a zoom-in effect.

field--type-text-with-summary img:hover:
This CSS selector targets elements within elements with a class field--type-text-with-summary when they are hovered over with the mouse.

animation: animateimg 5s:
This property applies the animateimg animation to the images.
5s specifies that the animation duration should be 5 seconds.

Best wishes,
Alaa

Beautiful, even if on some images the animation is a little jerky.
Is it possible to put animation only on some images? because where there are images of formulas, tables, it becomes a problem.
I tried putting a class in place of field--type-text-with-summary, but it doesn't work.

Thank you and greetings

I put the block id and now I can animate the individual images. It's beautiful: http://testns.gmpe.it/cms/

Thanks for everything