Zoom bei Mouseover anstatt in Mitte auf andere Position

    Hallo Zusammen,

    auf meiner Seite habe ich Ganzkörper-Profile von mir und meinen Mitarbeitern, welches ich mit dem Item "Our Team" von Wordpress / Betheme hinzugefügt habe.

    Nun ist es so, dass bei einem Mousover auf das Bild das Bild in die Mitte (quasi auf den Bauch) zoomt. Schöner wäre es natürlich, wenn an das Gesicht rangezoomt wird. Man müsste also irgendeinen Befehl einbinden, welche die Zoom Position von der Mitte des Bildes auf den oberen Bereich lenkt.

    Jemand eine Idee wie das gehen könnte?

    Vielen Dank und freundliche Grüße!

    • Gerade eben
    • Anzeige

    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

    Schreib mal folgendes in deine css

    CSS
    .if-overlay .image_frame:hover .image_wrapper img, .if-overlay .image_frame.hover .image_wrapper img {
    top: 70px !important;
}


    Mit Link zur Seite ist das doch so viel einfacher. Raten will hier nämlich keiner.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Schon mal vielen Dank. Das Bewirkt dass das Bild etwas nach unten rutsch (auch wenn es nun etwas ruckelig wirkt).

    Kann man auch umstellen dass noch weiter reingezoomt wird, d.h. das Gesicht noch größer wird?

    (Und falls man irgendwass einstellen kann das er stufenloser zoomt (smoother, ohne Ruckeln) wäre das auch klasse :P )

    Bitte folgende Änderung in der shortcodes.css ausprobieren:

    Code
    .image_frame .image_wrapper img:not(.ls-l) {
    position: relative;
    top: 290px;
     transform: scale(2,2);




}

    Einmal editiert, zuletzt von Presskopp (20. August 2015 um 15:43)

    Hallo Presskopp das funktionert! Schhon mal vielen Dank!

    Will es nur andersherum haben, also das das Bild im Ganzkörper Modus startet und bei nem Mouseover ins Gesicht zoomt. Aktuelle startet es mit den Gesichtern und zoomt bei einem Mouseover raus.

    CSS
    .if-overlay .image_frame:hover .image_wrapper img, .if-overlay .image_frame.hover .image_wrapper img {
    top: 290px !important;
    transform: scale(2,2);
}

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Noch eine kleine Anmerkung: Das mit dem Zoom bei den Bilden im Team bereich funktioniert wie gewünscht, nur leider passiert diese Zoom funktion bei allen Bildern, die ich auf der Internetseite benutzt WIe bekomme ich es hin, dass der Zoom genau bei diesen zwei Bildern im Team Bereich passiert, sonst aber nicht?

    Viele Grüße!

    Probier das:

    CSS
    .team .if-overlay .image_frame:hover .image_wrapper img, .team .if-overlay .image_frame.hover .image_wrapper img {
    top: 290px !important;
    transform: scale(2,2);
}

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Habs eingefügt, nun verhält es sich wieder so wie vor Einfügen des Codes: Bei allen Bildern auf der gesamten Internetseite passiert nichts (was gewollt ist) und bei Team zoomz bei einem Mouseover wieder leicht auf den Bacuh (Das ist vermutlich im Item "Our Team" so eingestellt)... :cry:

    Eigenartig, hätte erwartet, daß es geht, habe mal spaßeshalber statt .team .site-id-31 benutzt, geht aber auch nicht. Das irritiert mich, SirEctor bitte!

    CSS
    .team .image_frame:hover .image_wrapper img, .team .if-overlay .image_frame.hover .image_wrapper img {
    top: 900px !important;
    transform: scale(4, 4);




}

    Einmal editiert, zuletzt von Presskopp (20. August 2015 um 21:38)

    Also der CSS-Code ist nicht ganz sauber, es sollte z.B. .image_frame:hover anstelle von .image_frame.hover heißen (Pseudoklasse), aber der letztgenannte Code sollte gehen, der hier würde auch gehen, meine ich:

    CSS
    .team .image_frame:hover .image_wrapper img, .team .if-overlay .image_wrapper img {
    top: 900px !important;
    transform: scale(4, 4);




}

    Ersetzt bitte die 900px durch 150%. Oder laßt das erstmal und verkleinert mal den Screen, damit sich der Sinn dahinter ergibt.

    Freue mich wenn etwas funktioniert :-)

    Also wenn ich 900px durch 150% ersetze, wird wieder auf den Bauch gezoomt. Hab irgendwie angenommen das gibt die vertikale Position an oder so. Bei 900px ist es richtig, auch wenn ich das Fenster verkleinert hab, wird dennoch ins Gesicht gezoomt? :confused:

    So? Nun, soll mir recht sein, mache jetzt auch mal 'Feierabend'. Wir sind ja jetzt am Punkt, den Rest (falls es zu diesem Thema noch einen gibt), bekommt ihr dann ja jetzt ggf. leicht selbst hin, nicht? ;-)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden