Bild Overlay-Hover-Effekt

Diese Effekte basieren auf reinen CSS ohne Javascript

Beispiele:

img
Links
img
Rechts
img
Oben
img
Unten
img
Einblenden
img
Schräg
img
Aufklappen
img
Teilbereich

Zuerst erstellen wir das HTML-Gerüst für das Bild

<div class="bild">
   <img src="images/001.jpg" alt="img" class="img-fluid">
   <div class="overlay">
      <div class="text">Links</div>
   </div>
</div>

Als nächstes erstellen wir das CSS für die Klassen .bild, .overlay und .text

.bild {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
}
.overlay {
    position: absolute;
    transition: all .9s ease;
    opacity: 0;
    background: rgb(0, 0, 0, 0.4);
}
.bild:hover .overlay {
    opacity: 1;
}
.text {
    color: white;
    font-family: sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

position: relative/absolute - wird benötigt um das Overlay relativ zum Bild zu positionieren

transition - Zeit wie lange der Effekt dauert bis das Overlay erscheint

background -Farbe des Overlays, in diesen Fall Schwarz mit 0,3 Transparenz

opacity - Sichbarkeit des Overlays hier gleich Null somit unsichbar bei 1 wird voll Sichbar

top und left - Position bei top:50% (50% von oben) left:50% 50% von links, somit genau in der Mitte.

Nun können die einzelnen Effekte definiert werden

Overlay von rechts

CSS
.overlayRight {
    height: 100%;
    width: 0;
    top: 0;
    right: 0;
}
.bild:hover .overlayRight {
    width: 100%;
}
HTML
<div class="bild">
    <img src="images/002.jpg" alt="img" class="img-fluid">
    <div class="overlay overlayRight">
        <div class="text">Rechts</div>
    </div>
</div>
Beispiel
img
Rechts

Overlay von links

CSS
.overlayLeft {
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
}
.bild:hover .overlayLeft,{
    width: 100%;
}
HTML
<div class="bild">
    <img src="images/002.jpg" alt="img" class="img-fluid">
    <div class="overlay overlayLeft">
        <div class="text">Links</div>
    </div>
</div>
Beispiel
img
Links

Overlay von oben

CSS
.overlayTop {
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
}
.bild:hover .overlayTop{
    height: 100%;
}
HTML
<div class="bild">
    <img src="images/002.jpg" alt="img" class="img-fluid">
    <div class="overlay overlayTop">
        <div class="text">Oben</div>
    </div>
</div>
Beispiel
img
Oben

Overlay von unten

CSS
.overlayBottom {
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
}
.bild:hover .overlayBottom {
    height: 100%;
}
HTML
<div class="bild">
    <img src="images/002.jpg" alt="img" class="img-fluid">
    <div class="overlay overlayBottom">
        <div class="text">Unten</div>
    </div>
</div>
Beispiel
img
Unten

Durch ändern der von heiht auf 20% kann die Höhe des Overlay auf z.B. 20% gesetzt werden siehe oben Teilbereich.

Overlay von schräg oben

CSS
.overlayCross {
    width: 0;
    height: 0;
    top: 0;
    left: 0;
}
.bild:hover .overlayCross {
    height: 100%;
    width: 100%;
}
HTML
<div class="bild">
    <img src="images/002.jpg" alt="img" class="img-fluid">
    <div class="overlay overlayCross">
        <div class="text">Schräg</div>
    </div>
</div>
Beispiel
img
Schräg

Overlay einblenden

CSS
.overlayFade {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
HTML
<div class="bild">
    <img src="images/002.jpg" alt="img" class="img-fluid">
    <div class="overlay overlayFade">
        <div class="text">Einblenden</div>
    </div>
</div>
Beispiel
img
Einblenden

Overlay aufklappen

CSS
.overlayKlappen {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scaleY(0);
}
.bild:hover .overlayKlappen {
    transform: scaleY(1);
}
HTML
<div class="bild">
    <img src="images/002.jpg" alt="img" class="img-fluid">
    <div class="overlay overlayKlappen">
        <div class="text">Aufklappen</div>
    </div>
</div>
Beispiel
img
Aufklappen

Das komptette HTML mit CSS für alle Beispiele:

<style>
    .bild {
        position: relative;
        display: inline-block;
        margin-bottom: 30px;
    }
    .overlay {
        position: absolute;
        transition: all .9s ease;
        opacity: 0;
        background: rgb(0, 0, 0, 0.4);
        padding-right: 15px;
        padding-left: 15px;
    }
    .bild:hover .overlay {
        opacity: 1;
    }
    .text {
        color: white;
        font-family: sans-serif;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
    }
    .overlayLeft {
        height: 100%;
        width: 0;
        top: 0;
        left: 0;
    }
    .overlayRight {
        height: 100%;
        width: 0;
        top: 0;
        right: 0;
    }
    .bild:hover .overlayLeft,
    .bild:hover .overlayRight {
        width: 100%;
    }
    .overlayTop {
        width: 100%;
        height: 0;
        top: 0;
        left: 0;
    }
    .overlayBottom {
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
    }
    .bild:hover .overlayTop,
    .bild:hover .overlayBottom {
        height: 100%;
    }
    .overlayCross {
        width: 0;
        height: 0;
        top: 0;
        left: 0;
    }
    .bild:hover .overlayCross {
        height: 100%;
        width: 100%;
    }
    .overlayFade {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
    .overlayKlappen {
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        transform: scaleY(0);
    }

    .bild:hover .overlayKlappen {
        transform: scaleY(1);
    }
</style>
 <!-- HTML -->
<div class="row">
    <div class="col-md-3">
        <div class="bild">
            <img src="images/001.jpg" alt="img" class="img-fluid">
            <div class="overlay overlayLeft">
                <div class="text">Links</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="bild">
            <img src="images/002.jpg" alt="img" class="img-fluid">
            <div class="overlay overlayRight">
                <div class="text">Rechts</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="bild">
            <img src="images/005.jpg" alt="img" class="img-fluid">
            <div class="overlay overlayTop">
                <div class="text">Oben</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="bild">
            <img src="images/006.jpg" alt="img" class="img-fluid">
            <div class="overlay overlayBottom">
                <div class="text">Unten</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="bild">
            <img src="images/003.jpg" alt="img" class="img-fluid">
            <div class="overlay overlayFade">
                <div class="text">Einblenden</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="bild">
            <img src="images/007.jpg" alt="img" class="img-fluid">
            <div class="overlay overlayCross">
                <div class="text">SchrÀg</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="bild">
            <img src="images/008.jpg" alt="img" class="img-fluid">
            <div class="overlay overlayKlappen">
                <div class="text">Aufklappen</div>
            </div>
        </div>
    </div>
</div>