Membuat Efek 3D Hover pada Gambar di Blogger dengan CSS3

Membuat Efek 3D Hover pada Gambar di Blogger dengan CSS3

Dengan berkembangnya CSS3, saat ini telah banyak kreasi animasi dan tampilan memukau dari sebuah halaman web dengan memanfaatkan CSS3. Selain karena mudah digunakan, kode CSS juga bisa menghasilkan tampilan yang elegan dan animasi yang lengkap.

Tidak jarang seorang pemilik blog berusaha memberikan tampilan terbaik dari blognya dengan menggunakan CSS. Kamu bisa mencoba belajar CSS dengan hanya aplikasi browser di PC, baik itu Google Chrome maupun Mozilla. Baca di sini untuk mengetahuinya lebih lanjut.

Nah, dalam posting kali ini saya akan membahas tentang cara memasang efek hover 3D pada gambar di blog dengan menggunakan kode CSS. Dengan efek 3 dimensi ini kamu akan mendapatkan animasi yang keren di blog kamu yang akan membuat pengunjung terpukau. Sebagai contoh pada halaman demo berikut, kamu bisa melihat contoh gambar yang menggunakan efek 3D dengan menggunakan kode CSS, silakan coba arahkan kursor kamu diatas gambar tersebut dan lihat hasilnya.


Untuk membuat hal serupa di blog kamu 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 kamu pasang kode CSS efek tersebut pada blog kamu 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 kamu perlu mengganti bagian yang ditandai pada kode CSS diatas dengan URL gambar yang kamu inginkan. Dengan itu selesailah pemasangan efek 3D di blog kamu. Selanjutnya penggunaan kode HTML nya, pasang kode HTML efek ini pada saat menulis artikel atau posting di blog kamu, tempelkan dalam mode penulisan HTML.

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

Silakan ganti bagian yang ditandai pada kode HTML diatas sesuai keinginan kamu, setelah itu lihatlah hasilnya di halaman blog. Karena efeknya hanya berlaku saat hover, maka saat melihatnya melalui pratinjau posting hasilnya mungkin tidak terlihat jika terdapat clicktrap. Sebaiknya publikasikan terlebih dahulu untuk melihatnya. Atau kamu bisa mencoba menghilangkan clicktrap di blogger di sini.

Apabila gambar yang diinginkan tidak tampil sesuai yang diharapkan harap periksa kesalahan yang mungkin ada, misal terdapat kode CSS yang saling tumpang tindih atau ada kode yang terpotong. Jika masih bermasalah coba gunakan HTML Editor untuk mencobanya terlebih dahulu.

Mungkin cukup sekian yang dapat saya sampaikan tentang cara memasang efek 3D pada gambar di Blogger. Semoga artikel ini bisa bermanfaat. Silakan sampaikan komentar terbaik kamu melalui komentar di bawah, baik itu berupa pertanyaan maupun pernyataan. Terima kasih dan sampai jumpa!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel