Bewegen Sie den Mauszeiger über die Grafik für die Anzeige des CSS Overlays
<html>
<head>
...
<!-- CSS Style-Definitionen -->
<style>
.overcontainer {
position: relative;
width: 1%;
height: 1%;
}
.overimage {
display: block;
}
.overlay {
position: absolute;
/* Schriftformat des Overlay-Textes */
bottom: 30%;
/* Hintergrundfarbe des Overlays und Transparenz (0-1) */
background-color: rgba(25,25,255,.2);
overflow: hidden;
/* Overlay-Breite analog zur Grafik */
width: 400px;
height:0;
/* Effekt-Dauer (sec.) und -Abbremsen (ease, linear, ...) */
transition: 0.3s ease;
}
.overcontainer:hover .overlay {
bottom: 20%;
height: 80%;
}
.overtext {
white-space: nowrap;
/* Schriftformat des Overlay-Textes */
color: lightgrey;
font-size: 20px;
font-family: Arial;
overflow: hidden;
position: absolute;
/* Schrift-Position 0-100% */
top: 50%;
left: 50%;
/* Schrift zurueckbewegen zur Zentrierung */
transform: translate(-50%,-50%);
}
</style>
...
<body>
<!-- Anzeige von Grafik und Overlay -->
<div class="overcontainer">
<!-- Hier den Pfad zur Grafik eintragen -->
<img src="...." width="400" height="250" alt="Overlay" class="overimage">
<div class="overlay">
<!-- Hier den Overlay-Text eintragen -->
<div class="overtext">Overlay Text</div>
</div>
</div>
...
</body>
</html>