Beispiel:CSS-grid-ausrichtung-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!doctype html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bildunterschrift auf Bild</title>
  <style>
.stacked {
    display: grid;
max-width: 50em;
}

.stacked > * {
  grid-area: 1 / 1;
}


.stacked figcaption {
    align-self: end;
	backdrop-filter: blur(3px);
		color: #fea;
		text-align: center;
}

</style>
</head>
 
<body>
  <h1>Bildunterschrift auf Bild</h1>

<figure class="stacked">
	<img src="https://wiki.selfhtml.org/images/d/dc/Landscape-2.svg" alt="placeholder">
	<figcaption>
			<h3>Abruzzen</h3>
			<p>Sonnenaufgang im Paradies</p>
	</figcaption>  
</figure>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-ausrichtung-4.html&oldid=99997“