Sunday, March 5, 2017

Membuat Efek 3D Hover pada Gambar di Blog dengan CSS3

Membuat Efek 3D Hover pada Gambar di Blog dengan CSS3

Assalamu'alaikum warohmatullahi wabarokatuh, dalam posting kali ini saya akan membahas tentang cara memasang efek hover 3D pada gambar di blog dengan menggunakan CSS3. Tanpa panjang lebar, berikut ini contohnya gambar yang menggunakan efek 3D dengan menggunakan CSS3, silakan coba arahkan kursor sobat diatas gambar tersebut dan lihat hasilnya.


Untuk membuat hal serupa di blog sobat memerlukan beberapa kode, kode yang digunakan hanya ada dua jenis, yaitu HTML dan CSS dengan hasil yang cukup ringan jika dibandingkan dengan efek yang ditampilkan. Untuk dapat menggunakan efek tersebut pertama-tama sobat pasang kode CSS efek tersebut pada blog sobat dengan membuka dashboard blogger pilih Template kemudian klik Edit HTML. Setelah itu temukan kode ]]></b:skin> dan tempelkan kode berikut diatasnya.

.thumb {
 width: 400px; height: 300px; margin: 20px auto 50px;
 perspective: 1000px;
}
.thumb a {
 display: block; width: 100%; height: 100%;
 /*double layered BG for lighting effect*/
 background: 
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
  url("https://4.bp.blogspot.com/-TqTk0qfMoys/WLwZkOLBukI/AAAAAAAAH_Y/8JeXrTIRIJ0iDRUVB30ME2WtgMEmbny0ACLcB/s640/pine%2Btree%2Bforest%2Bwallpaper.jpg");
 /*disabling the translucent black bg on the main image*/
 background-size: 0, cover;
 /*3d space for children*/
 transform-style: preserve-3d;
 transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
 /*36px high element positioned at the bottom of the image*/
 content: ''; position: absolute; left: 0; bottom: 0; 
 width: 100%; height: 36px;
 /*inherit the main BG*/
 background: inherit; background-size: cover, cover;
 /*draw the BG bottom up*/
 background-position: bottom;
 /*rotate the surface 90deg on the bottom axis*/
 transform: rotateX(90deg); transform-origin: bottom;
}
/*label style*/
.thumb a span {
 color: white; text-transform: uppercase;
 position: absolute; top: 100%; left: 0; width: 100%;
 font: bold 12px/36px Montserrat; text-align: center;
 /*the rotation is a bit less than the bottom surface to avoid flickering*/
 transform: rotateX(-89.99deg); transform-origin: top;
 z-index: 1;
}
/*shadow*/
.thumb a:before {
 content: ''; position: absolute; top: 0; left: 0;
 width: 100%; height: 100%;
 background: rgba(0, 0, 0, 0.5); 
 box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
 transition: all 0.5s; 
 /*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
 opacity: 0.15;
 transform: rotateX(95deg) translateZ(-80px) scale(0.75);
 transform-origin: bottom;
}
.thumb:hover a:before {
 opacity: 1;
 /*blurred effect using box shadow as filter: blur is not supported in all browsers*/
 box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
 /*pushing the shadow down and scaling it down to size*/
 transform: rotateX(0) translateZ(-60px) scale(0.85);
}

Setelah itu silakan sobat ganti bagian yang ditandai pada kode CSS diatas dengan URL gambar yang sobat inginkan. Dengan itu selesailah pemasangan efek 3D di blog sobat. Selanjutnya penggunaan kode HTML nya, pasang kode HTML efek ini pada saat menulis artikel atau posting di blog sobat, tempelkan dalam mode penulisan HTML

<div class="thumb">
<a href="http://www.maringngerrang.com/"><span class="hadi">Maringngerrang Blog</span></a></div>

Silakan ganti bagian yang ditandai pada kode HTML diatas sesuai dengan keinginan sobat, setelah itu lihatlah hasilnya, apabila gambar yang diinginkan tidak tampil sesuai yang diharapkan harap periksa kesalahan yang mungkin ada, misal terdapat kode CSS yang saling mempengaruhi atau ada kode yang rusak/terpotong.

Mungkin cukup sekian yang dapat saya sampaikan, semoga saja bisa bermanfaat, apabila terdapat hal-hal yang keliru silakan sobat sampaikan melalui kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.
Disqus Comments