Hover-Element über Bilder

Thema wurde von alfred_hoefle, 1. Dezember 2016 erstellt.

  1. alfred_hoefle

    alfred_hoefle Aktives Mitglied

    Registriert seit:
    22. September 2016
    Beiträge:
    25
    Danke erhalten:
    1
    Danke vergeben:
    1
    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:
    2016-12-01_14h31_30.png

    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
     
  2. alfred_hoefle

    alfred_hoefle Aktives Mitglied

    Registriert seit:
    22. September 2016
    Beiträge:
    25
    Danke erhalten:
    1
    Danke vergeben:
    1
    #2 alfred_hoefle, 1. Dezember 2016
    Zuletzt von einem Moderator bearbeitet: 1. Dezember 2016
    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>&nbsp;</p>
    
    <div class="col-xs-12">
     
  3. alfred_hoefle

    alfred_hoefle Aktives Mitglied

    Registriert seit:
    22. September 2016
    Beiträge:
    25
    Danke erhalten:
    1
    Danke vergeben:
    1
    Hier noch mein HTML code von Index + wie es aktuell aussieht 2016-12-01_14h37_54.png
     
  4. alfred_hoefle

    alfred_hoefle Aktives Mitglied

    Registriert seit:
    22. September 2016
    Beiträge:
    25
    Danke erhalten:
    1
    Danke vergeben:
    1
    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);
    }