Hi Leute, In Gambio Test Shop 2 sieht man oben auf er Startseite drei Bilder. Wenn man mit der Maus über eines der Bilder fährt, tritt ein kleiner Zoom Effekt in Erscheinung. Ich find das super! Wie kriege ich das hin? (Link nur für registrierte Nutzer sichtbar.) War bereits so frech mir den Quellcode aus dem Test Shop 2 der diese drei Bilder betrifft zu kopieren aber leider habe ich danach nicht diesen Zoom Effekt auf meiner Seite. Was fehlt? Danke für eure Hilfe und eure Zeit.
Das funktioniert per CSS. Code: .home-teaser:hover > div { width: calc(100% + 16px); height: calc(100% + 16px); left: -8px; top: -8px; } Beim Hovern wird das Bild 8 Punkte nach links und oben geschoben, ausserdem 16 Punkte vergrössert. Das sieht am Ende aus wie zoomen.
Hmm habe deinen CSS Code via StyleEdit in mein Template eingefügt aber leider haben die Beispiel Bilder keinen Effekt. Das Startseiten HTML sieht so aus: Code: <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="kinder-babys/"><img alt="" class="img-responsive" src="images/image/Startseite_1.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/image/Startseite_2.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/image/Startseite_3.jpg" /></a> </div> </div> Woran könnte das liegen?
Ich weiß gerade nicht zu 100% ob das funktioniert, aber versuch mal das hier: Code: .home-teaser:hover > img { width: calc(100% + 16px); height: calc(100% + 16px); left: -8px; top: -8px; } Normalerweise ist da im Shop2 noch ein JavaScript aktiv, dass aus den Bildern per <img>-Tag Hintergrundbilder in <div>-Tags erstellt, aber ich bin der Meinung, dass das auch ohne das JavaScript mit meinem CSS funktionieren könnte.
Leider funktioniert es mit diesem CSS Code auch nicht :-( Habe nur das CSS geändert via Style Edit aber die drei Bilder haben leider keinerei Reaktion beim Mouse-Over. Sehr schade, ich finde diesen Effekt echt spitze.
Also bei mir im Testshop funktioniert es mit dem Code von Torben (Link nur für registrierte Nutzer sichtbar.) (Die Bilder über den Restposten)
Hallo ich möchte einen ähnlichen Effekt bei den Bildern auf der Startseite erreichen. Dazu habe ich den Code wie folgt angepasst: Code: img:hover { width: calc(50% + 2px); height: calc(50% + 2px); left: -2px; top: -2px; } Ich habe den zoomt etwas herunter genommen, da mich die Bilder sonst erschlagen haben. Leider habe ich den gewünschten Effekt noch nicht ganz hinbekommen. Momentan wird das aktivierte Bild wirklich vergrößert, was zur Folge hat, dass das nebenstehende Bild etwas kleiner wird. Ich würde gerne die Bildgrößen beibehalten und sanft in das Bild hinein zoomen. Weiß jemand wie der Code angepasst werden müsste?
Habe noch einen Fehler bemerkt. Mit meinem Code werden alle Bilder gezoomt. Sowohl die im Slider als auch die kleinen Bildern bei den Produktempfehlungen. Wie spreche ich nur die gewünschten Bilder an?