Wie kann man bei HTML einen Hover Effekt für Bilder erstellen wo der Text hervorscheint?

3 Antworten

medmonk
31.12.2016, 14:06

Nutz ein Div als umschließenden Container. Diesem Div gibst du ein position: relative. Dem darin liegendem Bild weißt du ein position: absolute zu. Das selbe auch nochmal für ein weiteres Div, das als Container für den Content dient. Dein Markup dann wie folgt aussehen könnte:

<div class="view">
 <img src="path/to/image.jpg" />
 <div class="mask">
  <!--// content here! -->
 </div>
</div>

Nun das CSS dazu:

.view {
 position: relative; 
 overflow: hidden;
}
.view img, .mask {
 position: absolute;
 top: 0px;
 left: 0px;
}
.mask {
 background: black; 
 opacity: 0;
}
.view:hover .mask {opacity: 1;}

Das kann man natürlich noch feiner ausarbeiten. Vor allem was die Animation mit transition und Co. angeht. Es aber der Einfachheit halber auf wesentliche reduziert. Gibt auch im Internet Dutzend Beispiele, wie man solche Hover-Effekte basteln kann. Also einfach mal mit Google nach »Pure CSS Image Hover-Effects« suchen. 

LG medmonk
Berny96
29.12.2016, 16:12

Erstelle das Bild mit dem Text oben drüber. Der Text sollte am besten eine eigene ID/Klasse haben. Der Text sollte standardmäßig mit CSS unsichtbar gemacht sein. Dann benutzt man die Pseudoklasse "hover" um beim hovern einen anderen style anzuwenden und in unserem Fall den Text wieder einzublenden.

Ausblenden:

#text {
   display: none;
}

Einblenden:

#text:hover {
   display: block;
}

Um es aber sanft erscheinen zu lassen, muss man mit der Transparenz des Textes arbeiten und es mithilfe einer Transition/Animation langsam einblenden. 
Woher ich das weiß:Berufserfahrung – Beruf, Schule, Hobby und eigene Erfahrungen
MrMurphy
29.12.2016, 16:02

Hallo

Auf der Seite wurde das mit JavaScript gemacht.

Bei einem Portfolio solltest du aber auf hover-Effekte verzichten, da Touchscreens die nicht kennen. Und somit alle Besucher mit Touchscreens die dahinter versteckten Informationen verborgen bleiben.

Gleiches gilt für Besucher, die bei ihrem Browser JavaScript blockiert haben.

Und für Besucher, die nicht mit ihrem Mauszeiger auf Webseiten sinnfrei hin- und herwedeln.

Gruss

MrMurphy