Bild mit Hover-Text

Manchmal kann es sinnvoll sein, ein Bild bspw. mit einem Hover-Text zu versehen. So kann man bspw. den Namen des Autors über seinem Profilbild schweben lassen. Auch in einer Galerie ist dabei ein solcher Effekt zumeist sehr nett anzusehen. Mit CSS ist dabei sehr einfach möglich, ein Bild mit Hover-Text zu erstellen.

Möchtest du deine Bilder ebenfalls mit einem hübschen Hover-Effekt versehen? Im Folgenden zeige ich dir, wie du einen Hover Effekt auf deine Bilder setzen kannst.

 

Ein Bild mit Hover-Text in CSS erstellen

Mit dem folgenden Beispiel kannst du kurzum auf einem Bild einen Text erscheinen lassen. Dazu musst du nur mit der Maus über das Bild fahren.

Aber das ist noch nicht alles. Neben dem Hover-Text, dunkelt das Snippet des Weiteren das Bild ab und zeigt oben und unten schwarze Querbalken an. Dieser schöne Effekt eignet sich dabei besonders für Bildergalerien oder in einer Übersicht. Auch Profilbilder lassen sich so sehr ansprechend gestalten (bspw. in einer Autor-Informationsbox).

 

Live Beispiel

Damit du dir den Effekt einmal anschauen kannst, habe ich dazu das folgende Live Beispiel für dich erstellt. Schau dir den Effekt einfach mal an, indem du mit deinem Mauszeiger über das Bild fährst.

 

Sollte bei dir kein Bild zu sehen sein, kannst du kurzum auch einfach dem Direktlink zum Live Beispiel folgen.

 

CSS Code für den Hover Effekt

Füge dazu einfach das nachstehende Snippet in deine CSS Datei ein, um den Effekt nutzen zu können.

Code (CSS):

.hovertitle {
  background-color: #000;
  color: #fff;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 24px;
  margin: 8px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.hovertitle * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.hovertitle:before,
.hovertitle:after {
  background-color: rgba(0, 0, 0, 0.5);
  border-top: 50px solid rgba(0, 0, 0, 0.5);
  border-bottom: 50px solid rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 0;
}

.hovertitle:before {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.hovertitle:after {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.hovertitle img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.hovertitle figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.hovertitle h3 {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
}

.hovertitle h3 span {
  display: block;
  font-weight: 700;
}

.hovertitle a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.hovertitle:hover > img,
.hovertitle.hover > img {
  opacity: 0.7;
}

.hovertitle:hover:before,
.hovertitle.hover:before,
.hovertitle:hover:after,
.hovertitle.hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.hovertitle:hover figcaption,
.hovertitle.hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

 

Anschließend kannst du das Bild wie folgt in deine Website einfügen:

Code (HTML):

<figure class="hovertitle">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
  <figcaption>
    <h3>HTML <span>Tutorial</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>

 

Fazit

Mit ein wenig CSS kannst du somit einen sehr hübschen Hover-Effekt für deine Bilder erzeugen. Das eben gezeigte Snippet funktioniert dabei auch mit allen gängigen Browsern, wie dir die Übersicht im nächsten Abschnitt verdeutlicht. Einziger Wermutstropfen: Auf dem Smartphone funktioniert die Animation dabei nur einmalig beim Anklicken. Das ist aber auch logisch, da man auf dem Smartphone eben nicht mit dem Finger „hovern“ kann.

Bist du ebenso auf der Suche nach weiteren, netten Effekten mit CSS? Vielleicht wäre dabei der animierte Fortschrittsbalken ja etwas für dich. Schau doch einfach mal rein. Ansonsten könnte ich dir dazu auch noch den Artikel „Hyperlinks mit linearem Farbverlauf“ empfehlen. Mit diesem CSS Effekt kannst du deine Website ebenfalls grafisch etwas aufpeppen.

 

Browser-Test

Das oben genannte CSS Snippet habe ich dazu in folgenden Browsern getestet.

  • Mozilla Firefox 56.0
  • Google Chrome 62
  • Microsoft Edge
  • Microsoft Internet Explorer 11

Die genannten Browser zeigen das Snippet dabei richtig an. Ich kann jedoch leider nicht sagen, ob auch in hier nicht genannte Browser dieses CSS Snippet korrekt darstellen.


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.