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

4 Kommentare

Schreibe ein Kommentar zu Bilder Zoom Effekt beim Hover

  1. avatar mcvoicexmcvoicex sagt:

    Klasse! Ein toller Beitrag! Vieles geht heutzutage ohne irgendwelche riesigen (und zum Teil ungenutzten) Frameworks oder aufgeblasene Plugins! Danke für Deine tolle Arbeit! Allein mit HTML und CSS kann man tolle Webseiten schaffen!

    • avatar adminadmin sagt:

      Hey mcvoicex,

      da stimme ich dir voll und ganz zu. Die Möglichkeiten Animationen mit CSS zu erstellen haben sich in den letzten Jahren unglaublich verbessert. Das macht es auch extrem einfacher schnell der Seite das gewisse Etwas zu geben. Man darf es nur nicht übertreiben, ansonsten kommt es bei manchen älteren Rechnern / Browsern zu Rucklern. Ein gesundes Mittelmaß finden.

      Lg Oli

  2. avatar nonaNona sagt:

    Hi, ich finde deinen Beitrag sehr gelungen. Konnte ihn auch bereits für meine Website nutzen 🙂
    Falls es nicht zu unverschämt ist, würde es mich interessieren ob man deinen BeispielCode auch so abändern kann, dass das verwendete Bild auf einem mobilen Gerät (Smartphone) nicht mit dem Hover Effekt (wie auf dem PC) angezeigt wird, sondern stattdessen „einfach nur als Bild“ über die komplette Bildschirmbreite?
    Gruß Nona

    • avatar adminadmin sagt:

      Hey Nona,

      ja, das ist möglich. Du musst dazu in der CSS-Datei einen Breakingpoint anlegen. Dies könnte dann in etwa so aussehen:

      @media (max-width: 768px) {
      *.rotate:hover {
      -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);
      }
      }

      Dies bedeutet, dass uner einer Breite von 768px (Tablett-Größe) der Rotation- und Zoom-Effekt nicht funktioniert.

      Der Box musst du dann eine Breite von 100% geben. Der gesamte Code könnte dann in etwa so aussehen:

      @media (max-width: 768px) {
      *.rotate:hover {
      -moz-transform: scale(1) rotate(0deg); // keine Skalierung und keine Rotation im Mozilla
      -ms-transform: scale(1) rotate(0deg); // keine Skalierung und keine Rotation im schlimmsten Browser der Welt (IE)
      -o-transform: scale(1) rotate(0deg); // keine Skalierung und keine Rotation im Opera
      -webkit-transform: scale(1) rotate(0deg); // keine Skalierung und keine Rotation im Safari
      transform: scale(1) rotate(0deg); // keine Skalierung und keine Rotation
      }
      article div.box-wrapper {
      flex-wrap: wrap; // erlaubt den Umbruch bei display: flex
      }
      article div.box-wrapper div.box {
      width: 100%; // volle Breite
      min-width: 100%; // mind. volle Breite
      }
      }

      Ich hoffe ich konnte dir helfen.

      LG Oli

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

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

Follow Me

doch mal auf Instagram