Wie kann man einen animierten Text über einem Bild bei Hover nur mit CSS3 anzeigen

Es ist möglich, einen animierten Text über einem verblassten Bild beim Hover mit CSS zu erstellen.

Wenn Sie mit der Maus über das Bild bewegen und der Text animiert erscheint, dann sind Sie hier richtig! Mal sehen, wie wir das Schritt für Schritt machen können.

  1. Fügen Sie ein Bild mit dem Tag <img> und dem Text hinzu.
    2. Zuerst sollen Sie Ihr Bild mit dem Tag <img> hinzufügen. In einem anderen Tag <div> sollen den Text, den Sie schweben lassen möchten, einfügen.
  2. Stellen Sie den Selektor :hover ein.
    3. Der Effekt hover wird mit der Pseudo-Klasse :hover, die das Element auswählt und stylt, eingestellt.
  3. Definieren Sie die Eigenschaft opacity.
    4. Die erste Eigenschaft, die Sie definieren müssen, ist opacity, die den Grad der Transparenz eines Elements angibt. Das wird jedes Element innerhalb der Klasse am Anfang ausblenden.
  4. Stellen Sie die Übergangseigenschaften ein.

Die nächste Eigenschaft, die eingestellt werden muss, ist die Eigenschaft transition, die die Werte des Elements in Millisekunden ändert.

Im angegebenen Beispiel verblasst der Übergang das Bild langsam, in 400 Millisekunden, wenn Sie mit der Maus über das Bild bewegen. Wenn Sie die Eigenschaft transition nicht angeben, gibt es keinen Effekt und das Bild wird schnell verblassen.

Es werden auch die Eigenschaften transition-delay und transition-durationverwendet. Die erste gibt den Startvorgang an und die zweite gibt die Zeit an, die der Text benötigt, um von oben nach unten zu wechseln.

Lassen Sie uns die Schritte mit diesem Beispiel anzeigen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example{
      position:relative;
      padding:0;
      width:300px;
      display:block;
      cursor:pointer;
      overflow:hidden;
      }
      .content {
      opacity:0;
      font-size: 40px;
      position:absolute;
      top:0;
      left:0;
      color:#1c87c9;
      background-color:rgba(200,200,200,0.5);
      width:300px;
      height:300px;
      -webkit-transition: all 400ms ease-out;
      -moz-transition: all 400ms ease-out;
      -o-transition: all 400ms ease-out;
      -ms-transition: all 400ms ease-out;
      transition: all 400ms ease-out;
      text-align:center;
      }
      .example .content:hover { opacity:1; }      
      .example .content .text {
      height:0;
      opacity:1;
      transition-delay: 0s;
      transition-duration: 0.4s;
      }
      .example .content:hover .text {
      opacity:1;
      transform: translateY(250px);
      -webkit-transform: translateY(250px);
      }
    </style>
  </head>
  <body>
    <h2>Animierter Text über einem verblassten Bild beim Hover</h2>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" 
        width="300" height="300" alt="tree" />
      <div class="content">
        <div class="text">Tree</div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example{
      position:relative;
      padding:0;
      width:300px;
      display:block;
      cursor:pointer;
      overflow:hidden;
      }
      .content {
      opacity:0;
      font-size: 40px;
      position:absolute;
      top:0;
      left:0;
      color:#1c87c9;
      background-color:rgba(200,200,200,0.5);
      width:300px;
      height:300px;
      -webkit-transition: all 400ms ease-out;
      -moz-transition: all 400ms ease-out;
      -o-transition: all 400ms ease-out;
      -ms-transition: all 400ms ease-out;
      transition: all 400ms ease-out;
      text-align:center;
      }
      .example .content:hover { opacity:1; }      
      .example .content .text {
      height:0;
      opacity:1;
      transition-delay: 0s;
      transition-duration: 0.4s;
      }
      .example .content:hover .text {
      opacity:1;
      transform: translateY(250px);
      -webkit-transform: translateY(250px);
      }
    </style>
  </head>
  <body>
    <h2>Animierter Text über einem verblassten Bild beim Hover</h2>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" 
        width="300" height="300" alt="tree" />
      <div class="content">
        <div class="text">Baum</div>
      </div>
    </div>
  </body>
</html>
Wenn Sie die Eigenschaft text-align auf "left" oder "right" einstellen, erscheint der Text von oben nach unten auf der linken bzw. rechten Seite.

Ein anderes Beispiel, wo sich der Text von unten nach Mitte bewegt:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example {
      cursor: pointer;
      height: 300px;
      position: relative;
      overflow: hidden;
      width: 400px;
      text-align:center;
      }
      .example .fadedbox {
      background-color: #666666;
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      opacity: 0;
      width: 360px;
      height: 100px;
      padding: 130px 20px;
      }
      .example:hover .fadedbox { opacity: 0.8; }
      .example .text {
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      transform: translateY(30px);
      -webkit-transform: translateY(30px);
      }
      .example .title {
      font-size: 2.5em;
      text-transform: uppercase;
      opacity: 0;
      transition-delay: 0.2s;
      transition-duration: 0.3s;
      }
      .example:hover .title,
      .example:focus .title {
      opacity: 1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
      }
    </style>
  </head>
  <body>
    <h2>Animierter Text über einem verblassten Bild beim Hover</h2>
    <div class="example">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="tile3" width="400" height="300" alt="house" />
      <div class="fadedbox">
        <div class="title text"> Haus </div>
      </div>
    </div>
  </body>
</html>
Für maximale Browserkompatibilität werden die Erweiterungen -webkit- für Safari, Google Chrome, und Opera (neuere Versionen), -moz- für Firefox, -o- für ältere Versionen von Opera, -.