Hallo zusammen, ich möchte gerne etwas ''Leben'' in meinen Shop (Malibu-Theme) bringen, die ich durch Hover-Effekte erreichen möchte. Und zwar sollen meine 5 Kategorie-Bilder so angepasst werden, dass beim Rüberfahren über eine Kategorie das Bild langsam zoomt. Als die perfekte Vorlage dient mir dieser Shop: (Link nur für registrierte Nutzer sichtbar.) Genau so, wie in diesem Gambio-Shop dargestellt, möchte ich es in meinem Shop darstellen. Leider scheitere ich dabei kläglich. Auch diverse Anleitungen über CSS haben mich nicht zum gewünschten Ziel gebracht. Hat jemand in seinem Shop so etwas integriert oder weiß, wie ich dies genau umsetzen kann?
Das sind aber eigentlich keine Kategoriebilder, sondern Bilder, die über ein Widget auf die Startseite gesetzt wurden. Du müsstest Dir die Codes mit "Element Untersuchen" (Taste F12) ansehen und übernehmen. Sowohl die html-classe, wie auch das gesamte css dazu. Nachtrag: eventuell fehlt aber auch nohc ein Javascript. Mir fällt aber gerade ein, dass einer der alten Testshops (Testshop 2?) von Gambio einen ähnlichen Effekt hatte.dazu gab es auch eine Anleitung im Forum, vielleicht könnte man das ins Theme übernehmen, oder dafür anpassen.
(Link nur für registrierte Nutzer sichtbar.) hier findest du das HTML und das CSS dazu. Das HTML fügst du in ein HTML Widget ein und das CSS ins eingene CSS. ich habs gerade in meinen Shop getestet. Es funktioniert. Die Geschwindigkeit des Zooms usw. passt du in diesem CSS an.
Vielen Dank für die schnellen Antworten . @barbara Ja, im Testshop 2 ((Link nur für registrierte Nutzer sichtbar.)) ist dieser Hover-Effekt integriert. Ich finde aber leider nicht die passende CSS (weder aus dem oben angezeigten Shop noch aus dem Testshop 2). Den richtigen HTML-Code habe ich wohl hoffentlich erwischt. @Klaiber Michaela Also bei mir im Shop funktioniert dieser Code nicht so, wie es angezeigt wird. Die Bilder ''springen'' mich jetzt zwar an, aber sind unsortiert und deutlich außerhalb des Rahmens. Auch ist alles untereinander und nicht nebeneinander.
Teile die Sektion in 3 Teile. 33% 33% 33% in jedes setzt du ein HTML Widget. dann fügst du diesen HTML Code ein: Code: <div class="box-wrapper"> <div class="box"> <img class="scale transition" src="https://www.klaiber-michaela.de/images/HochzeitJahrestag%20(2).jpg" alt="hochzeit"> </div> </div> SRC und Alt musst du natürlich mit deinem ersetzen und dann fügst du das CSS in deinen eigenen CSS Bereich ein: Code: *.scale { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } *.scale:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } /* TRANSITION */ *.transition { -webkit-transition: all 1.3s linear; -moz-transition: all 1.3s linear; -ms-transition: all 1.3s linear; -o-transition: all 1.3s linear; transition: all 1.3s linear; } article div.box-wrapper { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; padding: 20px; } article div.box-wrapper div.box { width: 33%; height: auto; overflow: hidden; position: relative; display: inline-block; } article div.box-wrapper div.box:hover { z-index: 999; box-shadow: 0 0 10px rgba(0,0,0,0.3); } article div.box img { width: 100%; height: auto; } übernimm es erstmal so. dann kannst du immer noch Anpassungen machen. Bei mir gehts. (klick danach auf "Vorschau".)
Oder befasse dich mit Gridspalten und wie man die im html einsetzt. (Link nur für registrierte Nutzer sichtbar.)
@macra schau mal auf meine Startseite. Ich habe heute ein bisschen gebastelt: Die (Kategorie)-Bilder "Hochzeit/Jahrestag" und "Willkommen-Schilder". Hier hab ich 2 Bilder in einer Spalte. (Damit sie mobil nebeneinader bleiben) und jetzt hab ich diesen Zoom noch mit dazu gemacht. (nur in der Desktop-Ansicht) Ich habe HTML-Widgets verwendet und diese dann mit den Kategorien verlinkt. Ob ich das jetzt technisch einwandfrei umgesetzt habe, sehen wahrscheinlich die Profis. Nachtrag: in meinem Shop hab ich jetzt aber andere HTML Codes und CSS verwendet als in meinem Post oben. Ich habe alles an mein bestehendes HTML angepasst. Da ich immer 2 Bilder in einer Spalte habe.