Skip to main content
BLOG F2P

follow us
Home CSS3 Tutorial Widget CSS3 Gambar dengan efek caption

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://fery.my.id">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://fery.my.id">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://fery.my.id">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://fery.my.id">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://fery.my.id">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://fery.my.id">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://fery.my.id">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

CSS3 Tutorial Widget

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar