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 Fotos) Ich wäre sehr dankbar, wenn mir da jemand weiterhelfen kann. Liebe Grüße.

Der hier verwendete Code

<style> *{ margin:0; padding:0; border-radius:5px; } body{ height:100vh; overflow:hidden; } article { width:300px; height:450px; margin:calc((100vh - 450px)/4) auto; overflow:hidden; display:flex; flex-direction:column; padding:10px; border:2px solid black; } #helper{ border:2px solid green; flex:8; display:flex; overflow:hidden; justify-content:center; } .helper_image{ overflow:hidden; display:flex; transition:600ms transform; border:2px solid blue; width:100%; } #helper .helper_image img{ transition:600ms transform; transform:scale(1); width:calc(100% - 4px); border:2px solid red; } .text-holder{ flex:1; border:2px solid black; text-align:center; margin-top:10px; padding:15px 0 0 0; transition:300ms all; } #helper:hover .helper_image{ transition:600ms transform; transform:scale(0.9); display:flex; height:100%; align-self:center; } #helper:hover .helper_image img{ transition:600ms transform; width:100%; transform:scale(1.4); } h3:hover{ font-size:200%; transition:300ms all; } </style> <article> <div id="helper"> <div class="helper_image"> <img src="https://solene.qodeinteractive.com/wp-content/uploads/2019/11/h1-port-feauture-img-4.jpg"></div> </div> <h3 class="text-holder"> Love Shades </h3> </div> </article>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!