CSS-Grid/08b-image-caption.html at main · dragoncillos/CSS-Grid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Image with Caption</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/base.css" />
	<style type="text/css">
		figure {
			margin: 4rem auto;
			max-width: 34rem;
			max-height: 28rem;

			display: grid;
			/* grid-template-columns: 1fr; */
			grid-template-areas:
				"fig";
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;

			grid-area: fig;
		}

		figcaption {
			background-color: rgba(30, 30, 30, 0.6);
			padding: 0.8rem 1rem;
			color: #fff;
			font-size: 0.8rem;

			grid-area: fig;
			align-self: end;
		}
	</style>
</head>

<body>
	<figure>
		<img src="images/landscape.jpg" alt="Waterfalls" />
		<figcaption>
			Image has grid area named "fig" and figcaption also "fig" because we want both of them to occupy the same grid
			area. We have the elements overlapping each other by default. Both items are stretching full height and full
			width, but we want the caption to align to the bottom of the cell and occupy only as much height as the captioned
			height and you remember which property you need to use to align content of one particular item vertically.
		</figcaption>
	</figure>
</body>

</html>