Hallo liebe Community, ich hätte eine Frage zur Umsetzung für eine Box die sich über meinen Bildern befindet und mit dem Element :hover angesprochen wird. Ich würde gerne wie folgt: Solch eine Bock wie hier: Deal der Woche: Gesund ernähren in der Vorweihnachtszeit [Jetzt 15% sparen] über meine Bilder legen und dann wie ihr Oben rechts seht, sobald meine Maus über das Bild geht das diese Box reagiert. Ich hoffe jemand von euch kann mir weiterhelfen... Viele Grüße
HTML: <!-- Kommentar: Test mit Bild und Tabellenbreite--> <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/ddw47familie.jpg" style="height: 40%; width: 100%;" /></a></div> <div class="col-xs-12 col-md-4 row-xs-2 row-md-1"><a class="home-teaser" href="kinder-babys/"><img alt="" class="img-responsive" src="images/powerbar.jpg" style="height: 55%; width: 99%;" /></a></div> <div class="col-xs-12 col-md-4 row-xs-2 row-md-1"><a class="home-teaser" href="kinder-babys/"><img alt="" class="img-responsive" col-xs-12="" home-teaser="" src="images/Startseitenkacheln_NL_klein_20161122_002_.jpg" style="height: 55%; width: 99%; margin-top: 20px;" /></a></div> <p> </p> <div class="col-xs-12">
Konnte mit diesem Codeauschnitt, zwar keine Box hineinbekommen, aber das Bild verfärbt sich leicht grau wenn ich darüber Swipe. .img-responsive:hover{ opacity:0.6; filter:alpha(opacity=80); }