Mouseover-Zoom

Julian-FOR

Hallo zusammen,

ich habe ein Problem und hoffe auf Hilfe.

Bei Mouse-Over soll ein Bild gezoomt werden, allerdings soll sich der "Rahmen" des Bildes nicht verändern. Hier soll also das Bild in einem Ausschnitt vergrößert werden. Gibt es hierfür Plugins oder vielleicht auch einfach ein CSS Code?

In Benutzung ist WP 5.4.1 mit Pro - Child Theme.

Danke schon im Voraus.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

r23

Google schon wieder ausgefallen?

Julian-FOR

Hallo r23, ich habe tatsächlich google genutzt und verzweifel langsam, da ich dort immer nur das zoomen wie in einem Onlineshop finde, also das dann eine Lightbox mit dem gezoomten Inhalt zu sehen ist.

Allerdings meine ich den Zoom den ich hier im CSS programiert habe.

Code

.zoom {
transition: transform 0.6s;
-moz-transition: transform 0.6s;
-webkit-transition: transform 0.6s;
-o-transition: transform 0.6s;
-ms-transition: transform 0.6s;
}


.zoom:hover {
transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
}

Alles anzeigen

Kann auch einfach sein, das ich nen Brett vor dem Kopf und einen Nagel im Hirn habe, aber hierfür finde ich einfach keine Lösung

b3317133

Link zu Deiner Seite mit Deinem Versuch und Erklärung was daran anders werden soll?

Julian-FOR

http://mercedes.mltdwn.de/test/

der Mercedes soll sich zwar vergrößern, allerdings soll das Bild vom Grundmaß her gleich bleiben.

b3317133

Mit dem aktuell verwendeten HTML [FONT=Courier New]img[/FONT] in [FONT=Courier New]span[/FONT] könntest Du sowas verwenden:

Code

.zoom {
    display: inline-block;
    overflow: hidden;
}
.zoom img {
    transition: transform 0.6s;
    -moz-transition: transform 0.6s;
    -webkit-transition: transform 0.6s;
    -o-transition: transform 0.6s;
    -ms-transition: transform 0.6s;
}
.zoom img:hover {
    transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
}

Alles anzeigen

Evtl. finden sich (auch bei ähnlichen Fragen) im Support Forum des Theme Herstellers auch Lösungen oder Alternativen, den Support habt ihr mitgekauft.

Julian-FOR

Perfekt, es funktioniert wie gewünscht.

Ich danke vielmals.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Mouseover-Zoom

Jetzt mitmachen!