<figure>
Last updated
Last updated
<div class="frame">
<figure>
<img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>
</div>
<div class="frame">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Neckertal_20150527-6384.jpg/1200px-Neckertal_20150527-6384.jpg" alt="Natural Landscape">
<figcaption>Natural Landscape</figcaption>
</figure>
</div>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
background-color: gray;
/* โญ๏ธ CSS variables */
--padding: 5px;
--border: thin #333 solid;
}
body {
padding: 1em;
}
figure {
/* โญ๏ธ ๅปบ็ซๅๆจ็ณป๏ผ็จไพๆบ็ธ็ๆๅญ็็ตๅฐไฝ็ฝฎ */
position: relative;
border: var(--border);
}
figure img {
/*
โญ๏ธ <img> ้ ่จญ็บ inline,
ๅฆๆๆฒๆๆนๆ block๏ผๅ็ๅพ้ขๆ็ไธๅ
inline ๅ
็ด ็นๆ็ใ็ฉบ้ใโ๏ธ
*/
display: block;
width: 100%;
}
figcaption {
/* โญ๏ธ ๅฐๆๅญๆพๅจ็ธ็็ไธ็ทฃ */
position: absolute;
bottom: 0;
width: 100%;
/* โญ๏ธ ไฝฟ็จ้ๆ็่ๆฏ่ฒ๏ผ่ฎๅพ้ข็็ธ็ๅฏไปฅ้ๅบไพ */
background-color: rgba(34, 34, 34, 0.5);
/* โญ๏ธ ๆๅญ็ฝฎไธญ */
text-align: center;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
}
/* ็จๆผๅฐใ็ธ็็ฝฎไธญใ็ๅคๆก */
.frame {
/* โญ๏ธ ่จญๅฎ็ธๆก็ๆๅคงๅฏฌๅบฆ */
max-width: 400px;
/* โญ๏ธ ็ธๆก็ฝฎไธญ */
margin: 1em auto;
padding: var(--padding);
border: var(--border);
background-color: white;
}