Hovereffekt auf Slider

html.de-Forum HTML, XHTML & CSS
1

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.

 <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;

}[/CODE]

2

Das geht relativ einfach. Du nimmst ein

und setzt seinen Hintergrund auf das Bild das du haben möchtest. Dann macht du noch einen
in dieses eben erstellte
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

3

Das Ding ist das ich das Ganze nicht als Background machen kann, da der Slider nur mit einem mit einem arbeiten kann.
Ich versuche es zurzeit mit einem z-index, doch leider versage ich an dieser Stelle. Die beiden

reihen sich immer noch dem Dokumentenfluss ein, sprich liegen nicht übereinander.
Ich habe einmal den Code angehängt.

[CODE]

<div id="first">
    <img src="Achse.png">
</div>

<div id="second">
        <h1>Vergrößern</h1>
</div>
[/CODE]

[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;
}[/CODE]
4

Stelle niemals eine Frage, wenn Google sie beantworten kann!
https://www.w3schools.com/howto/howto_css_image_overlay.asp
Hier ist deine Lösung