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="/image/h1-port-feauture-img-4.jpg"></div>
</div>
<h3 class="text-holder">
Love Shades </h3>
</div>
</article>