Kommentare zu: Bilder Zoom Effekt beim Hover

Von: Al

Al — Fri, 30 May 2025 11:34:45 +0000

Hallo Oli, vielen Dank für dein schönes Beispiel. Gibt es auch eine Möglichkeit wenn die Div-Box die Größe beibehält und das Bild darin einen zoom macht, die Bildabmessungen jedoch nicht in Pixel sondern in % agegeben sind?
LG Al

Von: sebadja

sebadja — Tue, 21 May 2024 05:07:30 +0000

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

Von: admin

admin — Thu, 24 Nov 2022 12:26:57 +0000

Als Antwort auf Estrella Ina.

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

Von: Estrella Ina

Estrella Ina — Thu, 24 Nov 2022 09:55:23 +0000

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.

Von: admin

admin — Wed, 23 Nov 2022 12:34:45 +0000

Als Antwort auf Estrella Ina.

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

Von: Estrella Ina

Estrella Ina — Wed, 23 Nov 2022 12:01:22 +0000

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

Von: Adam

Adam — Wed, 23 Jun 2021 09:48:50 +0000

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

Von: admin

admin — Fri, 18 Dec 2020 07:48:16 +0000

Als Antwort auf jack.

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

Von: jack

jack — Thu, 17 Dec 2020 23:33:29 +0000

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

Von: admin

admin — Thu, 19 Nov 2020 15:11:18 +0000

Als Antwort auf Nona.

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