1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 5.4 Hoover Effekt zoombares Bild gesucht

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von Frank9652, 11. September 2020.

Schlagworte:
  1. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    709
    Zustimmungen:
    1
    Hallo Leute,
    ich suche folgenden Hoover Effekt vielleicht als Plugin oder auch als Codeschnipsel.

    Wenn man mit der Maus auf ein Bild fährt, dass dann das Bild unterhalb der Maus herangezoomt (vergrößert dargestellt) wird.

    Wie heißt dieser Effekt und wo kann ich ihn finden?
    Ich habe mir schon einige Anleitungen von Hoover-Plugins angeschaut, aber dieser von mir gewünschte Effekt war bei den Anleitungen nicht dabei.
    Auch habe ich mir schon einige Lightboxen angeschaut - da war aber auch dieser Effekt nicht dabei.

    Danke fürs lesen.

    Gruß Frank
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.654
    Zustimmungen:
    796
  3. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    709
    Zustimmungen:
    1
    Vielen Dank für die schnelle Antwort, werde ich ausprobieren.

    Gruß Frank
     
  4. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    709
    Zustimmungen:
    1
    Vielen Dank, im Prinzip funktioniert es.
    Aber zum einen hätte ich gerne, dass (in meinem Fall) der "äussere Rahmen" mitwachsen soll.
    Welche Parameter muss ich da ändern? (Habe keine Ahnung von CSS).
    Und zum anderen, welche Parameter muss ich ändern um einen stärkeren oder schwächeren Hoovereffekt zu erzielen?

    Vielen Dank noch einmal.

    Gruß Frank
     
  5. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.654
    Zustimmungen:
    796
    Ohne Link zu Deinem Fall kann man dazu nichts sagen.
    Lies das Beispiel, probiere Werte aus, nutze Suchmaschinen. Dadurch bekommt man Ahnung...
     
  6. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    709
    Zustimmungen:
    1
    Vielen Dank für deine Hilfe.

    Gruß Frank
     
  7. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    709
    Zustimmungen:
    1
    So, ich habe mich jetzt mal mit dem Hoover-Effekt beschäftigt, bekomme aber eine Sache nicht so hin wie ich es gerne hätte.
    Der "äussere Rahmen" des Bildes soll nicht mitwachsen wenn man die Maus auf das Bild bewegt. Sondern nur das Bild innerhalb des Rahmens soll herangezoomt werden.
    Ich habe herausgefunden, wenn man in der CSS unterhalb von
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    genau die Breite und Höhe des Bildes selbst angibt, dass dann der äussere Rahmen seine Größe nicht verändert (so wie ich es haben will).
    Nun will ich ja den Container für unterschiedlich große Bilder verwenden, deshalb ist hier eine fixe Größe kontraproduktiv.
    Ich habe schon versucht die Pixelangaben mit
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    auszutauschen - das wurde aber ignoriert.

    Kann mir jemand sagen, wie ich die festen Werte so austauschen kann, dass ich unterschiedlich große Bilder mit ein- und demselben Container benutzen kann?
    Ich möchte halt nicht für jedes Bild für das ich diesen Hoover Effekt haben möchte aber andere Abmessungen hat einen separaten Container anlegen müssen.

    Hier der momentane CSS-Code

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Hier ein LINK zur Testseite

    Danke fürs lesen.

    Gruß Frank
     
  8. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.654
    Zustimmungen:
    796
    Eigentlich funktioniert alles bereits wie hier in #7 gewünscht mit exakt dem Code aus Antwort #6 im verlinkten Beitrag Mouseover-Zoom.

    Für Deine Testseite könnte man bei der Klasse zoom noch zwei Zeilen ergänzen (hier eingerückt):
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ergänzung für ggf. verwirrte Mitleser: Die Beschreibung aus #4 ("Rahmen soll mitwachsen") hat sich in #7 in das Gegenteil geändert ("Rahmen soll nicht mitwachsen")...
     
    #8 b3317133, 19. September 2020
    Zuletzt bearbeitet: 19. September 2020
    Frank9652 gefällt das.
  9. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    709
    Zustimmungen:
    1
    Danke vielmals, hat geklappt.
     
  10. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.654
    Zustimmungen:
    796
    Hier wird das obere Testbild jetzt exakt wie gewünscht dargestellt, der Rahmen ändert sich nicht, sowohl mit Firefox 80 als auch Chrome 85 als auch Internet Explorer 11.

    In der vorherigen Antwort stand zunächst, dass es nicht funktionieren würde, dann wurde die Antwort geändert...
     
  11. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    709
    Zustimmungen:
    1
    Ja, ich hatte vergessen den Refresh-Button des Browsers zu betätigen. :mad:
    Ich habe jetzt umgestellt dass das erste Bild die ursprüngliche Konfiguration zeigt, und die zweite nun den korrekten container.
    Vielen Dank nochmals.

    Gruß Frank
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden