Thumbs vergrößern

Alter Kerl · 18. November 2019

Hallo Mario,

von irgendwoher hatte ich dein Schript zum Vergrößern von Vorschaubildern:

Code

<style>
.zoom img {
transition: transform 0.2s;
}
.zoom img:hover {
transform: scale(1.1, 1.1);
}
</style>

Erstens: Ich finde den Code der zugehörige Klasse zoom nicht mehr... Wo kann ich den eingetragen haben?

Zweitens: Die Vorschaubilder liegen beim Vergrößern im Hintergrund, so dass angrenzende Thumbs im vergrößerten Bild sichtbar sind. Wie kann ich dies vermeiden, also dass die vergrößerten Bilder im Vordergrund liegen? Bitte HIER schauen.

Gruß

Norbert

Mario · 19. November 2019

1. Vermutlich unter Einstellungen > CSS oder in den Seitenspeziefischen CSS https://www.zella.de/code/einbinden.html

2. Entweder den Zoom-Wert verringern oder die Abstände vergrößern. Man könnte auch versuchen dem .zoom img:hover ein z-index hinzu zu fügen.

Fahre heute Nacht für 4 Wochen in Urlaub. Mehr dann im nächsten Jahr

Alter Kerl · 19. November 2019

Nur so, als Info: durch Herumsuchen im Net bin ich auf folgende Lösung gestoßen:

Code

<style>
.zoom img {
transition: transform 0.2s;
}
.zoom img:hover {
transform: scale(3.0, 3.0);
}
</style>

<style>
    .zpLinkBox a {
        position: static;
    }
</style>

Alles anzeigen

Dabei dem entsprechenden Widget die Klasse zoom gegeben.

SCHÖNEN URLAUB!

Gruß

Norbert

Teilen