Bilder Zoom Effekt beim Hover

Ein schöner Hover Effekt bei Bildern ist das elegante zoomen. Dies erzeugt einen dezenten aber wirkungsvollen Effekt, denn oft ist es nicht ersichtlich, dass sich hinter einem Bild ein Link oder beispielsweise eine Fancybox versteckt. Daher ist es sinnvoll Bilder, ebenso wie Links, anderweitig zu kennzeichnen. Entweder durch eine andere Textfarbe oder eben durch den Hover Zoom Effekt bei Bildern.

  • HTML
  • CSS
thailand maya beach longtail
thailand maya beach longtail
thailand maya beach longtail
*.scale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
*.scale:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}
/* TRANSITION */
*.transition {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;				
}
article div.box-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 20px;
}
article div.box-wrapper div.box {
	width: 33%;
	height: auto;
	overflow: hidden;
	position: relative;
	display: inline-block;
}
article div.box-wrapper div.box:hover {
	z-index: 999;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
article div.box img {
	width: 100%;
	height: auto;
}
thailand maya beach longtail
thailand maya beach longtail
thailand maya beach longtail

So funktioniert der Bilder Zoom Effekt

Fügt die folgenden Styles in Eure .css Datei.

-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);

Nun fügt Ihr noch den Hover hinzu, der das Bild skaliert. Der Wert 1.2 kann dabei nach belieben geändert werden.

-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);

Für einen eleganten Zoom Effekt fügt Ihr noch folgende Styles hinzufügen:

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;

Ihr könnt das Bild aber auch nur in eine Richtung skalieren. Gibt dazu anstelle von scale entweder scaleY oder scaleX an.

Vertikaler Zoom

-webkit-transform: scaleY(1);
-webkit-transform: scale(1.12);

Horizontalen Zoom

-webkit-transform: scaleX(1);
-webkit-transform: scale(1.12)

Wer die Styles in seine .css Datei kopiert hat, der sollte einen schönen Effekt beim Hover auf das Bild erhalten. Ich füge aber meistens noch ein Element um das Bild herum ein, welches ich die Eigenschaften overflow:hidden gebe, damit das Bild zwar skaliert wird, aber keine anderen Elemente überdeckt.

Und so könnte der komplette Code aussehen:

thailand-maya-beach-longtail

und die Styles

div.image {
	width: 300px;
	height: 200px;
	overflow: hidden;
}
div.image img {
	width: 100%;
	height: auto;
	/* SCALE */
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	/* VERZÖGERUNG */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
div.image img:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

Weitere Beispiele

Scale box

  • HTML
  • CSS
thailand-maya-beach-longtail
thailand-maya-beach-longtail
thailand-maya-beach-longtail
*.scale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
*.scale:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}
/* TRANSITION */
*.transition {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;				
}
article div.box-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	overflow: hidden;
}
article div.box-wrapper div.box {
	width: 33%;
	height: 150px;
	overflow: hidden;
	position: relative;
}
article div.box-wrapper div.box:hover {
	z-index: 999;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
article div.box img {
	width: 100%;
	height: auto;
}
thailand-maya-beach-longtail
thailand-maya-beach-longtail
thailand-maya-beach-longtail

Scale image and rotate

  • HTML
  • CSS
thailand-maya-beach-longtail
thailand-maya-beach-longtail
thailand-maya-beach-longtail
/* TRANSITION */
*.transition {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;				
}
/* ROTATE */
*.rotate {
	-moz-transform:  scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg);
	-o-transform: scale(1) rotate(0deg);
	-webkit-transform: scale(1) rotate(0deg);				
	transform: scale(1) rotate(0deg);
}
*.rotate:hover {
	-moz-transform: scale(1.9) rotate(15deg);
	-ms-transform: scale(1.9) rotate(15deg);
	-o-transform: scale(1.9) rotate(15deg);
	-webkit-transform: scale(1.9) rotate(15deg);				
	transform: scale(1.9) rotate(15deg);
}
article div.box-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	overflow: hidden;
}
article div.box-wrapper div.box {
	width: 33%;
	height: 150px;
	overflow: hidden;
	position: relative;
}
article div.box-wrapper div.box:hover {
	z-index: 999;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
article div.box img {
	width: 100%;
	height: auto;
}
thailand-maya-beach-longtail
thailand-maya-beach-longtail
thailand-maya-beach-longtail

oliver

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu Bilder Zoom Effekt beim Hover

Wenn dir der Beitrag Bilder Zoom Effekt beim Hover gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.

Hinterlasse ein Kommentar zum Beitrag "Bilder Zoom Effekt beim Hover"

Deine E-Mail-Adresse wird nicht veröffentlicht.

Follow Me

doch mal auf Instagram