Trik Hover gambar kaya FB pake CSS

Assalamualaikum Wr. Wb.
Di Hari minggu ini saya akan membagikan trik hover kepada sobat DC tercinta...
Kebetulan gambar ini adalah teman saya....#Hapunteun Neng geulis photo na ku Aa dianggo trik.
Langsung aja kita praktek ....

Wanita Berkerudung Mping.

Wanita Berkerudung Mping.

Wanita Berkerudung Mping.

Wanita Berkerudung Mping.

Berikut CSS nya :
<style type="text/css"> figure { display: block; position: relative; float: left; overflow: hidden; margin: 0 20px 20px 0; } figcaption { position: absolute; background: black; background: rgba(0,0,0,0.75); color: white; padding: 10px 20px; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } figure:hover figcaption { opacity: 1; } figure:before { content: "?"; position: absolute; font-weight: 800; background: black; background: rgba(255,255,255,0.75); text-shadow: 0 0 5px white; color: black; width: 24px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 24px; -moz-transition: all 0.6s ease; opacity: 0.75; } figure:hover:before { opacity: 0; } .cap-left:before { bottom: 10px; left: 10px; } .cap-left figcaption { bottom: 0; left: -30%; } .cap-left:hover figcaption { left: 0; } .cap-right:before { bottom: 10px; right: 10px; } .cap-right figcaption { bottom: 0; right: -30%; } .cap-right:hover figcaption { right: 0; } .cap-top:before { top: 10px; left: 10px; } .cap-top figcaption { left: 0; top: -30%; } .cap-top:hover figcaption { top: 0; } .cap-bot:before { bottom: 10px; left: 10px; } .cap-bot figcaption { left: 0; bottom: -30%;} .cap-bot:hover figcaption { bottom: 0; } </style>

Berikut HTML-nya :

<figure class="cap-top"> <img src="g.jpg" alt=""> <figcaption>Wanita Berkerudung Mping.</figcaption> </figure>

Gimana, cantik ga ceweknya.,.,wkwkwk.,.,