basti1012.bplaced.net

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: <a href="https://solene.qodeinteractive.com/">https://solene.qodeinteractive.com/</a> (Wenn man runterscrollt zu Authentic Fotos) Ich wäre sehr dankbar, wenn mir da jemand weiterhelfen kann. Liebe Grüße.

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>