basti1012.bplaced.net

Hallo ich habe mal eine Frage: auf der Seite: <a href="https://visitsweden.de/">https://visitsweden.de/</a> gibt es im unteren Bereich Container mit hover Effekt. Wo der Text nach oben über den Bild ein wenig scrollt. Weiß einer ein Beispiel wo man sowas als CSS3 HTML herbekommt .... Siehe Bild! <img class="vorschau" src="image/hovereffekt.jpg" alt="bild"> Wäre sehr dankbar ...

Code

                                    
                                <style>
  
  
*{
  margin:0;
  padding:0;
}
#conti{
  width:300px;
  height:270px;
  padding:10px;
  border:2px solid black;
  margin:0 auto;
  margin-top:40px;
  overflow:hidden;
}

figure{
  width:280px;
  margin:0 auto;
  overflow:hidden;
}
img{
  width:100%;
}
figcaption{
  padding:10px;
  text-align:center;
  transition:all 1s;
  width:calc(100% - 20px);
}
 
figure:hover > figcaption{
    transform: translateY(-80px);
    transition:all 1s;
    background:white;
}
</style>
<div id="conti">
<figure role="group">
  <img src="/image/2.png">
  <figcaption>
    ich schreibe hier mal 
 viel text damit man nur den anfang sehen kann schreibe ich etwas mehr damit beim hovern noch etwas text rausgeschoben wird den man vorher noch nicht sehen kommte
  </figcaption>
</figure>