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

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

  • Ohne dein HTML kann man nicht viel sagen.

    Du brauchst auf jeden Fall mehrere Container dafür.

    Habe mal auf der schnelle versucht das nach zubauen. Die CSS auf der Seite ist mir etwas voll.

    Soll auch nur ein Beispiel sein, die passende CSS kannst du dir dann selber zusammen suchen.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=452

    Habe den Container ein Border gegeben damit du siehst was welcher Container so macht.