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

*.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;
}

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:

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

*.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;
}

Scale image and rotate

HTML
CSS

/* 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;
}

9 Likes

Verfasst am 24.03.2015 Update 24.03.2023

revilodesign oli

individuelle-bildgroesse-in-wordpress-anlegen

Individuelle Bildgröße in WordPress anlegen

Menüpunkte im WordPress Admin Bereich umbenennen

12 Kommentare

Schreibe ein Kommentar zu Bilder Zoom Effekt beim Hover

mcvoicex sagt:
9. April 2020 um 13:58 Uhr

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!

Antworten
- admin sagt:
  10. April 2020 um 8:58 Uhr
  
  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
  
  Antworten
Nona sagt:
19. November 2020 um 2:04 Uhr

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

Antworten
- admin sagt:
  19. November 2020 um 16:11 Uhr
  
  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
  
  Antworten
jack sagt:
18. Dezember 2020 um 0:33 Uhr

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

Antworten
- admin sagt:
  18. Dezember 2020 um 8:48 Uhr
  
  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
  
  Antworten
Adam sagt:
23. Juni 2021 um 11:48 Uhr

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

Antworten
Estrella Ina sagt:
23. November 2022 um 13:01 Uhr

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

Antworten
- admin sagt:
  23. November 2022 um 13:34 Uhr
  
  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
  
  Antworten
Estrella Ina sagt:
24. November 2022 um 10:55 Uhr

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.

Antworten
- admin sagt:
  24. November 2022 um 13:26 Uhr
  
  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
  
  Antworten
sebadja sagt:
21. Mai 2024 um 7:07 Uhr

Hallo
Super Beispiele. Habe etliche ausprobiert und keiner hat funktioniert!
Dann habe ich festegestellt das der CSS code immer mir anfängt und endet.
Danach haben die Codes funktioniert.
Ist glaube eine „alte Hasen Krankheit* nicht alles reinzuschreiben, weil man einiges Wissen voraussetzt, was aber bei einem Anfänger nicht immer stimmt.

Danke dir für die Beispiele.
Gruss Ingo

Antworten

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

Letzte Aktualisierung am 2024-11-21 / Affiliate Links / Bilder von der Amazon Product Advertising API