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

Keine Produkte gefunden.

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);

Keine Produkte gefunden.

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);

Keine Produkte gefunden.

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

revilodesign oli

11 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

  3. avatar jackjack sagt:

    Die ersten beiden funktionieren überhaupt nicht.
    das erste NULL Effekt, das zweite verreißt die Seite.

    • avatar adminadmin sagt:

      Hey jack,

      ich denke das liegt an etwas anderem und nicht an meinem Code 🙂 Schick mir mal deine Seite an info@revilodesign.de, dann kann ich es mir anschauen und kann dir sagen, was der Fehler ist.

      LG Oli

  4. avatar adamAdam sagt:

    Sehr stark. Danke für Dein CSS Tipp!
    LG Adam

  5. avatar estrella inaEstrella Ina sagt:

    Vielen Dank für dein tolles Scipt! Kannst du mir noch weiterhelfen? Die Bilder floaten nicht, habe schon alles Mögliche probiert. bei m verkleinern dess Browsers, bleiben (meine4) Bilder in einer Reihe. Herzlichen Dank Estrella Ina

    • avatar adminadmin sagt:

      Hey Estrella Ina,

      bei article div.box-wrapper „flex-wrap: wrap“ angeben. Dann sollte er umbrechen.

      Anschließend kannst du dem Unterelement article div.box-wrapper div.box noch min-width: XX% und max-width: XX% angeben.

      Hoffe ich konnte helfen.

      LG Oli

  6. avatar estrella inaEstrella Ina sagt:

    VIelen Dank. aber leider irgendwie klappt es . worauf beziehen sich die min und max width. ?
    meine Breite ist 1170 px, ich habe 4 fotos a 600x 450px die nebeneinander gezeigt werden sollen und dann später floaten. sollen, allerding sitzen sie jetzt in 2 zeilen je 2 bilder und dies bleibt so, auch bei kleinem browser. (habe min-width:25%;
    max-width:45%; eingesetzt)
    darf ich dich noch fragen was article vor der div.box bedeutet? muss ich das evtl ersetzen?
    Hab ganz herzlichen Dank für deine Antwort.

    • avatar adminadmin sagt:

      Hey Estrella Ina,

      kannst du mir eine E-Mail an info@revilodesign.de schicken? Dann können wir uns besser austauschen als über die Kommentarfunktion. Danke.

      LG Oli

Schreibe einen Kommentar zu Nona Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Letzte Aktualisierung am 28.03.2024 / Affiliate Links / Bilder von der Amazon Product Advertising API

Follow Me

doch mal auf Instagram