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