Erweiterte Image-Hover-Effekte nur mit CSS

Die verbreitete Funktion von Hover-Effekten ist es, die Textlinks oder Schaltflächen hervorzuheben. Aber sie haben mehr Funktionen.

Hover-Effekte fügen einer Website ein Element der Interaktivität hinzu. Sie haben starke Effekte, wenn sie auf die Bilder angewendet werden. Sie können auch einen großen Einfluss auf den Benutzer haben, so dass Ihre Webseite gut gestaltet ist.

Hover ist ein Effekt, der auftritt, während Sie den Mauszeiger über ein Objekt bewegen. Es wird hauptsächlich für Styling und Benutzerfreundlichkeit verwendet.

In diesem Tutorial zeigen wir Ihnen, wie Sie kreative Hover-Effekte für Ihr Bild mit nur CSS erstellen können.

1. HTML erstellen

Fügen Sie das Tag <figure> mit der Klasse "image" ein. Das Tag <figure> wird verwendet, um netzunabhängige Inhalte anzuzeigen.
Verwenden Sie das Tag <figcaption>, um eine Beschriftung oder Erklärung für den Inhalt des Tags <figure> einzufügen.

<figure class="image">
  <img
    src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
  />
  <figcaption>
    <h3>W3docs</h3>
  </figcaption>
</figure>

Versuch es selber!

2. CSS hinzufügen

Stellen Sie die Eigenschaften max-width, min-width und max-height des Bildes win.
Stellen Sie die Eigenschaft position auf relative ein, so dass das Element relativ zu seiner normalen Position ist.
Stellen Sie overflow auf hidden ein, damit der Inhalt auf die Polsterbox zugeschnitten wird.
Stellen Sie die Farbe der Bildunterschrift und die Ausrichtung des Textes ein.

figure.image {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #eeeeee;
  text-align: center;
}

Fügen Sie die Eigenschaft transition zur Klasse des Bildes hinzu. Wir verwenden den Selektor * (Sternzeichen), der alle Elemente in einem Dokument selektiert.

figure.image * {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

Stellen Sie max-width des Bildes auf 100% ein.
Stellen Sie den Grad der Transparenz eines Elements ein.

figure.image img {
  max-width: 100%;
  position: relative;
  opacity: 0.6;
}

Unser nächster Schritt ist es, h3 zu stylen.

Stellen Sie background und position von h3 ein.
Definieren Sie die Eigenschaft transform. Es definiert die 2D- oder 3D-Transformation des Elements. Es ermöglicht das Drehen, Skalieren, Verdrehen oder Verschieben des Elements.
Stellen Sie die Eigenschaft text-transform auf uppercase ein, um alle Zeichen jeden Wortes in Großbuchstaben zu setzen.
Definieren Sie font-weight. Hier stellen wir es auf 400 ein.

figure.image h3 {
  position: absolute;
  left: 50px;
  right: 50px;
  display: inline-block;
  background: #000;
  -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  padding: 15px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}

Jetzt stylen wir das Pseudo-Element :before, ein generiertes Inhaltselement, das alle Elemente vor dem Inhalt hinzufügen.

Stellen Sie height und width des Elements und defineren Sie die Farbe.
Geben Sie transition mit einer Übergangsdauer von 0.3 an.
Geben Sie die Eigenschaft transform an. Drehen Sie das Element um 110 Grad und verschieben Sie das Element entlang der y-Achse um -50%.

figure.image:before {
  height: 130%;
  width: 130%;
  top: 0;
  left: 0;
  content: "";
  background: #cccccc;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(110deg) translateY(-50%);
  -moz-transform: rotate(110deg) translateY(-50%);
  -ms-transform: rotate(110deg) translateY(-50%);
  -o-transform: rotate(110deg) translateY(-50%);
  transform: rotate(110deg) translateY(-50%);
}

Mit dem nächsten Schritt stellen Sie den Hover-Effekt auf das Bild, h3 und :before ein.

figure.image:hover img,
figure.image.hover img {
  opacity: 1;
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
figure.image:hover h3,
figure.image.hover h3 {
  -moz-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.image:hover:before,
figure.image.hover:before {
  -moz-transform: rotate(110deg) translateY(-150%);
  -ms-transform: rotate(110deg) translateY(-150%);
  -o-transform: rotate(110deg) translateY(-150%);
  transform: rotate(110deg) translateY(-150%);
}

Lassen Sie uns die Teile unseres Codes zusammenfassen:

Example

<!doctype html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      figure.image {
      position: relative;
      overflow: hidden;
      margin: 10px;
      min-width: 220px;
      max-width: 310px;
      max-height: 220px;
      width: 100%;
      background: #000000;
      color: #eeeeee;
      text-align: center;
      }
      figure.image* {
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      }
      figure.image img {
      max-width: 100%;
      position: relative;
      opacity: 0.6;
      }
      figure.image h3 {
      position: absolute;
      left: 50px;
      right: 50px;
      display: inline-block;
      background: #000;
      -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
      padding: 15px 5px;
      margin: 0;
      top: 50%;
      text-transform: uppercase;
      font-weight: 400;
      }
      figure.image:before {
      height: 130%;
      width: 130%;
      top: 0;
      left: 0;
      content: '';
      background: #cccccc;
      position: absolute;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      -webkit-transform: rotate(110deg) translateY(-50%);
      -moz-transform: rotate(110deg) translateY(-50%);
      -ms-transform: rotate(110deg) translateY(-50%);
      -o-transform: rotate(110deg) translateY(-50%);
      transform: rotate(110deg) translateY(-50%);
      }
      figure.image:hover img,
      figure.image.hover img {
      opacity: 1;
      -moz-transform:scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1);
      }
      figure.image:hover h3,
      figure.image.hover h3 {
      -moz-transform:skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      }
      figure.image:hover:before,
      figure.image.hover:before {
      -moz-transform:rotate(110deg) translateY(-150%);
      -ms-transform: rotate(110deg) translateY(-150%);
      -o-transform: rotate(110deg) translateY(-150%);
      transform: rotate(110deg) translateY(-150%);
      }
    </style>
  </head>
  <body>
    <h2>Erweiterter Hover-Effekt</h2>
    <figure class="image">
      <img
        src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
        alt="W3docs"
      />
      <figcaption>
        <h3>W3docs</h3>
      </figcaption>
    </figure>
  </body>
</html>

Versuch es selber!

Lassen Sie uns ein weiteres Beispiel für eine dreidimensionale Transformation sehen:

Beispiel

<!doctype html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example {
      width: 250px;
      height: 250px;
      margin: 20px auto 40px auto;
      perspective: 1000px;
      }
      .example a {
      display: block;
      width: 100%;
      height: 100%;
      background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      background-size: cover;
      transform-style: preserve-3d;
      -webkit-transform: rotateX(80deg);
      -moz-transform: rotateX(80deg);
      -ms-transform: rotateX(80deg);
      -o-transform:  rotateX(80deg);
      transform: rotateX(80deg);
      -webkit-transition: all 0.8s;
      -moz-transition: all 0.8s;
      -o-transition: all 0.8s;
      transition: all 0.8s;
      }
      .example:hover a {
      -webkit-transform: rotateX(10deg);
      -moz-transform: rotateX(10deg);
      -ms-transform: rotateX(10deg);
      -o-transform:  rotateX(10deg);
      transform: rotateX(10deg);
      }
      .example a:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 20px;
      background: #cccccc;
      -webkit-transform: rotateX(60deg);
      -moz-transform: rotateX(60deg);
      -ms-transform: rotateX(60deg);
      -o-transform:  rotateX(60deg);
      transform: rotateX(60deg);
      transform-origin: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Erweiterter Hover-Effekt</h2>
    <div class="example">
      <a href="#"></a>
    </div>
  </body>
</html>

Versuch es selber!