Hovereffekt auf Slider

[Christian_01]

Hallo Leute,

ich möchte gerne ein Hovereffekt auf einen Slider haben. Den Slider habe ich mit Bootstrap erstellt (Punkte und Pfeile entfernt). Nun möchte ich, wenn ich mit der Maus über das Bild gehe, dass sich über das Bild eine graue Fläche mit opacity legt und dort mittig "Vergrößern" steht mit einer Lupe aus Bootstrap's glyphicons. Das ganze soll letztendlich ein Anchor haben und eine Lightbox öffnen.
Ich habe schon den Gedanken mit Jquery+Mousenter gefasst, weiß dort aber leider nicht wie ich damit ein solchen Effekt erstelle.
Über eure Hilfe werde ich mich freuen und ich bedanke mich schonmal im voraus.

Gruß Christian


Anhang:

Spoiler: HTML-Code

    <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="GPIO-Pi%203.png" alt="slider1">
                </div>

                <div class="item" id="slider2">
                  <img src="Fruhstucksbuffet.jpg" alt="slider2">
                </div>

                </div>
            
            </div>
        </div>

Spoiler: CSS-Code

#Aktion_Slider {
}
#carousel-example-generic{
width: 100%;
margin-top: 0%;
margin-left: 0%;
height: 100%;
}
#box{
width: auto;
}
}
#box .item img{
width: 60%;
margin-left: 20%;
border: 1px solid black;
z-index: -1;
content: "";
}