Bilderrahmen verkleinern + Bild zoomen als Hover

Hallo Zusammen,

kann mir jemand helfen wie der css code für so ein hover aussehen muss: Wenn man die Maus über ein Bild bewegt, soll sich der "Bilderrahmen" verkleinern das Bild im Rahmen vergrößern. Hier ein Beispiel wie ich mir das ungefähr vorstelle:

https://solene.qodeinteractive.com/ (Wenn man runterscrollt zu Authentic Photos)

Ich wäre sehr dankbar wenn mir da jemand weiterhelfen kann.

Liebe Grüße

Zitat von Axel

Hi - hier siehst du auch die Effekte - es muss nur noch eine Rahmenvergrößerung mit weißem Rahmen gemacht werden, dann hast du den Effekt:

https://www.html-seminar.de/bilder-animieren.htm

Und wenn du wissen willst, wie es funktioniert - einfach in den Quelltext schauen

(Rechte Maustaste und Quellcode ansehen)

Alles anzeigen

Danke Axel für deine Antwort. Ich habe das jetzt so in mein zusätzliches css in Wordpress eingefügt:

.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;

}

Allerdings wird jetzt das ganze bild vergrößert, nicht nur das bild innerhalb des rahmens sondern auch der rahmen dazu. in dem beispiel von der seite wird ja nur das bild innerhalb des rahmes verändert. was habe ich vergessen? den code habe ich aus dem quelltext.