Add Captionss for Beauty Image Display

Tag <figure> merupakan salah satu new semantic elements dari HTML5. Lihat table informasi support mengenai hal ini caniuse.com/#feat=html5semantic Dengan menambahkan elemen figure pada tag gambar satu manfaat yang terasa yaitu mempermudah dalam memberikan tag <figcaption> Singkat penjelasan, dengan hadirnya 2 jenis elemen tersebut akan mempermudah kita dalam menghias tagging gambar plus keterangan singkat dari gambar yg dimaksud.
Contoh:

Gambar seekor kucing unyui-unyu.

Tanpa memberikan embel² CSS tampak akan seperti gambar contoh. Image akan terlihat lebih indah jika 2 element figure & figcaption diberikan sedikit sentuhan CSS ;) Koben mau berbagi info tentang sensible CSS image captions. Master Josh Branchaud sudah membuatkan captionss

.embed, .embed-top, .overlay {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0;
font-size: .8em;
background: white;
overflow: hidden;
}
.embed img, .embed-top img, .overlay img {
width: 100%;
display: block;
}
.embed figcaption, .embed-top figcaption, .overlay figcaption {
width: 100%;
padding: .5em;
color: rgba(50, 50, 50, 1.0);
background: rgba(200, 200, 200, 0.825);
}
.embed *, .embed-top *, .overlay * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.embed figcaption {
position: absolute;
bottom: 0;
}
.embed-top figcaption {
position: absolute;
top: 0;
}
.overlay figcaption {
width: 100%;
height: 100%;
position: absolute;
top: 0;
opacity: 0;
}
.overlay:hover figcaption {
opacity: 1;
}
.light figcaption {
color: rgba(80, 80, 80, 1.0);
background: rgba(245, 245, 245, 0.825);
}
.dark figcaption {
color: rgba(245, 245, 245, 1.0);
background: rgba(50, 50, 50, 0.7);
}
.medium {
font-size: 1.0em;
}
.large {
font-size: 1.2em;
}
.xlarge {
font-size: 1.5em;
}
.hide figcaption {
opacity: 1;
}
.hide:hover figcaption {
opacity: 0;
}
.hide-smooth figcaption {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.hide-smooth:hover figcaption {
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.reveal figcaption {
opacity: 0;
}
.reveal:hover figcaption {
opacity: 1;
}
.reveal-smooth figcaption {
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.reveal-smooth:hover figcaption {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}

Saya menghilangkan value figure dari kode sumber. Agar syntax tidak secara khusus untuk digunakan memakai tag figure (bisa juga dengan tag div)!
Penulisan markup<figure class="embed">
<img src="http://placekitten.com/g/300/200" alt=""/>
<figcaption>
The caption text goes here...
</figcaption>
</figure>Ada 3 jenis style <figure class=". . ."> yg bisa kalian pakai: embed, embed-top and overlay.

Full Feature Listing

Style:	embed Positions a caption at the bottom. embed-top Positions a caption at the top. overlay Overlays the entire image with a caption.
Theme:	neutral Black on light gray (default). light Gray on lighter gray. dark White on dark gray.
Font Size:	normal Slightly smaller than page font-size, 0.8em (default). medium The page's font-size, 1.0em. large Slightly larger than page font-size, 1.2em. xlarge Large font-size for large images, 1.5em.
Effect:	hide Hide the caption immediately on mouse hover. hide-smooth Smoothly hide the caption on mouse hover. reveal Reveal the caption immediately on mouse hover. reveal-smooth Smoothly reveal the caption on mouse hover.

Kucing yang unyu-unyu...

Kucing yang unyu-unyu...

Kucing yang unyu-unyu...

Kucing yang unyu-unyu...

Kucing yang unyu-unyu...

Kucing yang unyu-unyu...

Kucing yang unyu-unyu...

Kucing yang unyu-unyu...

Kucing yang unyu-unyu...

Kucing yang unyu-unyu...

Happy figure \m/