CathyProductions - CSS Overlay

Bewegen Sie den Mauszeiger über die Grafik für die Anzeige des CSS Overlays

Simple Server Solutions

Zugehöriger Quellcode der HTML-Datei

    


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

CSS + Overlay

Zugehöriger Quellcode der HTML-Datei