Beispiel:Bilder präsentieren-5.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Bildunterschriften mit figcaption präsentieren</title>
<style>
figure, figcaption {
margin: 0;
padding: 0;
}
figure.einzel {
overflow:hidden;
position: relative;
display: inline-block;
width: 32.8%;
}
figure img {
width: 100%;
display: block;
}
figcaption {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
line-height: 3em;
color: white;
background: rgba(0,0,0,0.5);
}
figcaption {
position: absolute;
bottom: -3em; /* gilt für das erste (linke) Beispiel */
text-align: center;
line-height: 3em;
white-space: nowrap;
color: white;
background: rgba(0,0,0,0);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
figure.mitte figcaption {
width: 0;
left:50%;
}
/* gilt für das letzte (rechte) Beispiel */
figure.rechts figcaption {
width: 0;
bottom: 50%;
left: 50%;
overflow: hidden;
}
figure:focus figcaption,
figure:hover figcaption {
bottom: 0;
left:0;
width: 100%;
background: rgba(0,0,0,0.5);
}
/* das Fragezeichen als Pseudo-Element */
figure:before {
content: "?";
position: absolute;
bottom: 1em;
left: 1em;
background: rgba(255,255,255,0.5);
color: black;
width: 1.5em;
height: 1.5em;
border-radius: 1em;
text-align: center;
font-size: 1.5em;
line-height: 1.5em;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
figure:focus:before,
figure:hover:before {
background: rgba(255,255,255,0);
color: rgba(0,0,0,0);
}
@media only screen and (max-width:800px) {
body{
width: 100%;
margin: 2% 0;
padding: 1%;
}
figure.einzel {
width: 48%;
}
}
@media only screen and (max-width:600px) {
figure.einzel {
width: 100%;
}
}
</style>
</head>
<body>
<h1>einschwebende Bildunterschriften</h1>
<main>
<p>Probieren Sie die unterschiedlichen :hover-Effekte bei den einzelnen Bildern aus!</p>
<figure class="einzel">
<img src="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Nürnberger Tor</figcaption>
</figure>
<figure class="einzel mitte">
<img src="//wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
<figcaption>Brücke über die Pegnitz</figcaption>
</figure>
<figure class="einzel rechts">
<img src="//wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Mauermühle und Judenturm</figcaption>
</figure>
</main>
</body>
</html>