Wie mache ich mit diesem Code einen Zoom-In Effekt?

Guten Tag,

ich programmiere meine eigene Website und möchte nun einen Zoom-In Effekt für ein Bild einfügen. Hierfür möchte ich nur CSS benutzen. Schlussendlich sollte es so aussehen: https://w3bits.com/labs/css-image-hover-zoom/ Wenn ich den Code im CSS einfüge, vergrössert es das Bild einfach nur. Ich habe es wohl falsch angesprochen in CSS? Wie müsste daher der richtige Code aussehen, damit es funktioniert? Danke im Voraus für eure Hilfe!

Answer 1

[apachy]

Dann hast du vermutlich die Regeln für die Animation vergessen. Es gibt dort verschiedene Effekte und Geschwindigkeiten je nach Bild gibt. Musst eben das img Element inspekten und die Kombination nehmen, die du haben möchtest.

.img-hover-zoom--basic img {
  transition: transform .5s ease;
}

.img-hover-zoom--basic:hover img {
  transform: scale(1.5);
}

.img-hover-zoom--quick-zoom img {
  transform-origin: 0 0;
  transition: transform -2.75s, visibility -1.75s ease-in;
}

.img-hover-zoom--quick-zoom:hover img {
  transform: scale(2);
}

.img-hover-zoom--point-zoom img {
  transform-origin: 65% 75%;
  transition: transform 1s, filter .5s ease-out;
}

.img-hover-zoom--point-zoom:hover img {
  transform: scale(5);
}

.img-hover-zoom--zoom-n-rotate img {
  transition: transform .5s ease-in-out;
}

.img-hover-zoom--zoom-n-rotate:hover img {
  transform: scale(2) rotate(25deg);
}

.img-hover-zoom--slowmo img {
  transform-origin: 50% 65%;
  transition: transform 5s, filter 3s ease-in-out;
  filter: brightness(150%);
}

.img-hover-zoom--slowmo:hover img {
  filter: brightness(100%);
  transform: scale(3);
}

.img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}

.img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}

.img-hover-zoom--zoom-n-pan-h img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 100% 0;
}

.img-hover-zoom--zoom-n-pan-h:hover img {
  transform: scale(1.5) translateX(30%);
}

.img-hover-zoom--zoom-n-pan-v img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 0 0;
}

.img-hover-zoom--zoom-n-pan-v:hover img {
  transform: scale(1.25) translateY(-30%);
}

.img-hover-zoom--blur img {
  transition: transform 1s, filter 2s ease-in-out;
  filter: blur(2px);
  transform: scale(1.2);
}

.img-hover-zoom--blur:hover img {
  filter: blur(0);
  transform: scale(1);
}

.img-hover-zoom--colorize img {
  transition: transform .5s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}

.img-hover-zoom--colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}

Woher ich das weiß: Berufserfahrung – Softwareentwickler/Projektleiter seit 2012

Comments

[Helloitsme356]

Danke für deine Antwort. Mein Problem ist aber, dass es nicht hineinzoomt, sonder hinauszoomt. Es vergrössert das Bild einfach? Wie kann ich dies verhindern?

[apachy]

@Helloitsme356

Er vergrößert das Bild auf der Seite auch einfach nur. Nur ist eben ein Block-Element drum herum, was alles abschneidet, was aus dem Element raus geht via overflow: hidden

.img-hover-zoom {
    background: #222f3e;
    height: 300px;
    overflow: hidden;
    border-radius: .5em;
    border: 5px solid rgba(255, 255, 255, .05);
}

[Helloitsme356]

@apachy

Danke vielmals für deine Hilfe. Leider funktioniert dies mit dem overflow nicht.. Wo sollte dieses Block Element denn sein?

[apachy]

@Helloitsme356

Um das img-Tag drum herum. Hier ein Beispiel für den ersten Effekt:

https://jsfiddle.net/b6tqhmc7/

Ist letztlich aber auch alles so dargelegt im entsprechenden Artikel dazu:

https://w3bits.com/css-image-hover-zoom/

[Helloitsme356]

@apachy

Jetzt geht es:D Danke vielmals!!!