• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hovereffekt auf Slider

Christian_01

Mitglied
Hallo,

ich versuche einen guten Hovereffekt zu erstellen. Leider weis ich nicht wie ich so recht anfangen soll. Es soll über das Bild eine graue Fläche legen mit dem Schriftzug "Vergrößern".
Ich weiß leider nicht wie ich das realisieren soll und hätte da gerne ein paar Inspirationen von euch.

Im Anhang seht ihr nochmals wie ich das gerne haben möchte. Natürlich hänge ich auch die Codeausschnitte an.

Code:
 <div class="col-lg-12" id="Aktion">
  <div class="col-lg-6" id="Aktion_Content">
   <h2>Aktionen und Angebote</h2>
   <p>Zu unserem breiten Angebot an Gerichten und Getränken bieten wir auch immer wieder Aktionen an. Diese Aktionen können zeitlich begrenzt sein oder auch nur an bestimmten Terminen, zum Beispiel an Feiertagen.<br>
   Auf der rechten Seiten finden Sie alle aktuellen Aktionen und Angebote.</p>
  </div>
  
  <div class="col-lg-6" id="Aktion_Slider">
   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <!-- Verpackung für die Elemente -->
     <div class="carousel-inner" id="box" role="listbox">
    <div class="item active" id="slider1">
      <img src="Screenshot%20(8).png" alt="slider1">
    </div>
    <div class="item" id="slider2">
      <img src="Fruhstucksbuffet.jpg" alt="slider2">
    </div>
    </div>
   
   </div>
  </div>  
 </div>

Code:
/*Angebote und Aktionen*/

#Aktionen{
    
}

#Aktion p{
    font-size: 150%;
    font-weight: 400;
    margin-top: 4%;
    padding-top: 10%;
    line-height: 1.6;
}

#Aktion_Content{
    padding-left: 5%;
}

#Aktion_Slider {

}

#carousel-example-generic{
    width: 100%;
    margin-top: 0%;
    margin-left: 0%;
    height: 100%;
}

#box{
    width: 60%;
    margin-left: 20%;
    height: auto;
}
}
#box .item img{
    width: 60%;
    margin-left: 20%;
    border: 1px solid red;

}
 

Anhänge

  • Screenshot (21).png
    Screenshot (21).png
    134,8 KB · Aufrufe: 8
Werbung:
Das geht relativ einfach. Du nimmst ein <div> und setzt seinen Hintergrund auf das Bild das du haben möchtest. Dann macht du noch einen <div> in dieses eben erstellte <div> und setzt seinen background und seine Schriftfarbe auf transparent. Nun nur noch den hovereffekt einfügen (also Schriftfarbe und backgroundfarbe wieder einfügen) und Ende.
Wenn du hilfe brauchst einfach melden
 
Das Ding ist das ich das Ganze nicht als Background machen kann, da der Slider nur mit einem mit einem <img> arbeiten kann.
Ich versuche es zurzeit mit einem z-index, doch leider versage ich an dieser Stelle. Die beiden <div> reihen sich immer noch dem Dokumentenfluss ein, sprich liegen nicht übereinander.
Ich habe einmal den Code angehängt.

Code:
<body>
  
  
    <div id="first">
        <img src="Achse.png">
    </div>
  
    <div id="second">
            <h1>Vergrößern</h1>
    </div>
</body>

Code:
body{
        position: relative;
    }
    #first{
        background-size: cover;
        height: 100vh;
        width: 100%;
        position: relative;
        z-index: 0;
    }
  
    img{
        height: 100%;
        width:100%;
        position: relative;
        z-index: 0;
    }
  
    #second{
        color: transparent;
        background: transparent;
        border: 3px red solid;
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 1;
    }
  
    #second:hover{
        color: black;
        background: blue;
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 1;
    }
 
Werbung:
Zurück
Oben