Zoom-Effekt für ein Bild bei Mouse-Over
Diese einfache Effekt sieht sehr gut aus und kann auch als schattenlose und dennoch aktive Linkvariante verwendet werden. So sieht das aus:
Das Prinzip ist eigentlich sehr einfach. Rund um das Bild kommt ein Wrapper und dieser legt die Größe fest und hat ein "overflow:hidden". Das kann entweder ein "div" sein oder man nimmt gleich einen Link (dann allerdings das "display:inline-block" nicht vergessen.
Hier ein komplettes Beispiel, wie es auf dieser Seite realisiert wurde. Zuerst das CSS:
<style>
.img-wrapper {
display:inline-block;
width:20rem;
overflow:hidden;
border-radius:6px;
}
.img {
width:100%;
transition: all 0.3s cubic-bezier(.49,0,.52,.93);
}
.img:hover {
transform: scale(1.2);
transition: all 0.3s cubic-bezier(.49,0,.52,.93);
}
</style>
Und hier der HTML Teil:
<div class="img-wrapper">
<a href="#"><img class="img" src="./media/451/630x630"/></a>
</div>
Weitere Infos
Für die Transition wurde hier eine Bezier-Kurve verwendet. Dazu gibt es eine super Seite zum interaktiven Erstellen einer solchen Kurve: CSS Interactive Cubic-Bezier