CSS3 Gambar dengan efek caption

Belajar blog dan tutorial blog sering saya cari karena untuk materi-materi pembelajaran untuk saya pribadi karena saya masih pemula sekali di dunia internet khusus nya blogger dan website dan dari modal selancar di google saya banyak nemuin sesuatu yang baru dan kali ini akan saya bagikan cara menggunakanCSS3 Gambar dengan efek caption ,jika kamu ingin membuat website menjadi cantik mungkin css ini bisa membatu website kamu menjadi cantik tutorial nya simpel sakali dan mudah sekali di pahami
Pertama kamu letakan CSS ini di bagian atas </head>
Demo
Silakan arahkan mouse anda ke bagian gambar
<style>
figure.figurefx{margin:0;padding:0;display:inline-block;position:relative;overflow:hidden}figure.figurefx::before,figure.figurefx::after{content:'';width:100%;height:100%;display:block;background:black;position:absolute;opacity:0.3;top:0;left 0;-moz-transform:translate3d(0,-100%,0);-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s}figure.figurefx img{display:block}figure.figurefx figcaption{position:absolute;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center;background:white;padding:5px;z-index:100;width:100%;max-height:100%;overflow:hidden;top:50%;left:0;-moz-transform:translate3d(-100%,-50%,0);-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0);opacity:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s}figure.figurefx figcaption a{text-decoration:none}figure.default:hover::before{-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.default:hover figcaption{opacity:1;-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s;-moz-transition-delay:0.5s;-webkit-transition-delay:0.5s;transition-delay:0.5s}figure.dualpanels::after{-moz-transform:translate3d(0,100%,0);-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}figure.dualpanels:hover::before{-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}figure.dualpanels:hover::after{-moz-transform:translate3d(0,50%,0);-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}figure.dualpanels:hover figcaption{opacity:1;-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s;-moz-transition-delay:0.5s;-webkit-transition-delay:0.5s;transition-delay:0.5s}figure.dualpanels2::before{-moz-transform:translate3d(-100%,0,0);-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}figure.dualpanels2::after{-moz-transform:translate3d(100%,0,0);-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}figure.dualpanels2:hover::before{-moz-transform:translate3d(-50%,0,0);-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}figure.dualpanels2:hover::after{-moz-transform:translate3d(50%,0,0);-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0)}figure.dualpanels2:hover figcaption{opacity:1;-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s;-moz-transition-delay:0.5s;-webkit-transition-delay:0.5s;transition-delay:0.5s}figure.pushup img{-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s}figure.pushup figcaption{top:100%;opacity:1;-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.pushup:hover img{-moz-transform:translate3d(0,-20px,0);-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}figure.pushup:hover figcaption{-moz-transform:translate3d(0,-100%,0);-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s}figure.openreveal{overflow:visible;perspective:2000px}figure.openreveal::before,figure.openreveal::after{display:none}figure.openreveal img{position:relative;z-index:100;-moz-transform-origin:0 0;-webkit-transform-origin:0 0;transform-origin:0 0;-moz-transform:rotateX(0deg);-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s}figure.openreveal figcaption{z-index:99;opacity:1;-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}figure.openreveal:hover img{-moz-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}figure.flipreveal{overflow:visible;perspective:900px}figure.flipreveal::before,figure.flipreveal::after{display:none}figure.flipreveal img{position:relative;-moz-transform:rotateX(0deg);-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s;z-index:100;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}figure.flipreveal figcaption{opacity:1;top:0;width:100%;height:100%;z-index:99;-moz-transform:rotateX(180deg) translate3d(0,0,0);-webkit-transform:rotateX(180deg) translate3d(0,0,0);transform:rotateX(180deg) translate3d(0,0,0)}figure.flipreveal:hover img{-moz-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}figure.flipreveal:hover figcaption{-moz-transform:rotateX(360deg) translate3d(0,0,0);-webkit-transform:rotateX(360deg) translate3d(0,0,0);transform:rotateX(360deg) translate3d(0,0,0)}</style>
<!--[if lte IE 9]>
 <style>
 figure.figurefx::before,figure.figurefx::after{display:none}</style>
<![endif]-->
 

Setelah itu bisa langsung menerapkan coding nya , silakan buat sebuah artikel dengan gambar lalu kamu bisa menambahkan coding berikut di artikel kamu , silakan gunakan mode HTML untuk meletakan coding nya . Ada 3 coding yang bisa kamu gunakan dan untuk demo yang saya buat ini saya menggunakan script yang nomer 1.
Nomer 1.
<figure class="figurefx default">
 <img src="Link gambar" alt="An awesome picture"> 
 <figcaption>isi dari caption milik kamu <a href="http://www.ffery.com">A link</a></figcaption>
</figure>

Nomer 2.
<figure class="figurefx dualpanels">
 <img src="Link gambar>" alt="An awesome picture"> 
 <figcaption>An awesome picture caption! <a href="http://www.ffery.com">A link</a></figcaption>

Nomer 3.
<figure class="figurefx dualpanels2">
 <img src="baby.jpg" alt="An awesome picture"> 
 <figcaption>An awesome picture caption! <a href="http://www.ffery.com">A link</a></figcaption>
</figure>

Nomer 4.
<figure class="figurefx pushup">
 <img src="baby.jpg" alt="An awesome picture"> 
 <figcaption>An awesome picture caption! <a href="http://www.ffery.com">A link</a></figcaption>
</figure>

Nomer 5.
<figure class="figurefx pushup">
 <img src="baby.jpg" alt="An awesome picture"> 
 <figcaption>An awesome picture caption! <a href="http://www.ffery.com">A link</a></figcaption>
</figure>

Nomer 6.
<figure class="figurefx openreveal">
 <img src="baby.jpg" alt="An awesome picture"> 
 <figcaption>An awesome picture caption! <a href="http://www.ffery.com">A link</a></figcaption>
</figure>

Nomer 7.
<figure class="figurefx openreveal">
 <img src="baby.jpg" alt="An awesome picture"> 
 <figcaption>An awesome picture caption! <a href="http://www.ffery.com">A link</a></figcaption>
</figure>

untuk cara penggunaan bisa kamu ganti di script nomer 1 dan 2 text yang saya beri wanrna kuning bisa kamu ganti dengan kata-kata dan juga link website milik kamu jika ada pertanaan tentang CSS3 Gambar dengan efek caption saya siab membantu karena script nya mudah di pasang hehe


Use parse tool to easy get the text style on disqus comments:

Show ParserHide Parser