Hallo, ich möchte gerne die drei Kategorie-Bilder folgendermaßen gestalten: - Berührt man mit dem Cursor ein Kategoriebild, soll dieses Bild ''etwas entgegenkommen'' (So wie beim Testshop Honeygrid 2 - (Link nur für registrierte Nutzer sichtbar.)) - Dazu soll nicht nur ''Shop Now'', sondern auch das komplette Bild anklickbar sein und zur Kategorie weiterleiten Weiß jemand, wie dieses umzusetzen ist?
Das sind aber keine Kategoriebilder, sondern nur Werbebilder auf der Startsetie Das ist der Quellcode von der Content-Seite, die Bilder müssen eine entsprechende Größe haben.: HTML: <div class="row home-teaser-row space-0"> <div class="col-xs-12 col-md-8 row-xs-2 row-md-2"> <a class="home-teaser" href="kategorie1/"><img alt="" class="img-responsive" src="images/content/index/Bildname.jpg" /></a> </div> <div class="col-xs-12 col-md-4 row-xs-2 row-md-1"> <a class="home-teaser" href="specials.php"><img alt="" class="img-responsive" src="images/content/index/Bildname.jpg" /></a> </div> <div class="col-xs-12 col-md-4 row-xs-2 row-md-1"> <a class="home-teaser" href="info/versand-zahlungsbedingungen.html"><img alt="" class="img-responsive" src="images/content/index/Bildname.jpg" /></a> </div> </div> Dann kommt das css dafür: Code: // home teasers .home-teaser-row { margin-top: floor($grid-gutter-width / 2 * -1); padding: floor($grid-gutter-width / 4); } .home-teaser { position: absolute; height: calc(100% - 15px); width: calc(100% - 15px); display: block; left: floor($grid-gutter-width / 4); top: floor($grid-gutter-width / 4); background: transparent 50% 50% no-repeat; background-size: cover; overflow: hidden; img { display: none; } > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent 50% 50% no-repeat; background-size: cover; @include transition(300ms ease all); } &:hover { > div { width: calc(100% + 16px); height: calc(100% + 16px); left: -8px; top: -8px } } } Und man braucht ein Javascript: home-teasers.js mit diesem Inhalt: Code: $(function () { $(".home-teaser").each(function () { var $elem = $(this), $img = $("img", $elem); $elem.wrapInner("<div></div>"); var $imgContainer = $("div", $elem); $imgContainer.css("background-image", "url('" + $img.attr("src") + "')"); }); }); Wobei ich nicht weiß, wo man das im Theme ablegen müsste. Man muss den Bildern also die Klasse "home-teaser" geben, das css speichern und das Javascript in den Shop laden. Dann bekommt man den Effekt von den Bildern Über den Style Editor kann man dem Bild derzeit keinen Link geben, man kann nur einen Link oder Button auf das Bild setzen.
Vielen Dank für die Antwort. Wo gebe ich denn den HTML-Code ein? Ich kann hier (siehe Bild) leider nicht erkennen, wo ich einen entsprechenden Code dafür eingeben kann. Den CSS-Code gebe ich ja ganz normal bei ''SCSS/CSS bearbeiten'' ein.
Da kannst Du keinen html-Code eingeben. Deshalb kann man diese Bilder auch nicht mit einem Link versehen. Das geht nur wenn Du die Bilder im Content-Manager anlegst Du kannst die Bilder aber bewegen, indem Du die Klasse einträgst und dafür das css anlegst. Aber wie geschrieben brauchst Du auch das Javascript und da weiß ich nicht wo das hin müsste. Vielleicht im genutzen Theme in einen Verzeichnis javascript/custom/ ?