Cara membuat efek hover rotasi dan bayangan pada gambar postingan Blog

HaiSob apa kabar? Ok sob tutorial blog kali ini adalah tentang memberikan cara membuat efek hover rotasi dan bayangan pada gambar blog. Untuk membuat blog terlihat lebih menarik ada berbagai macam cara yang bisa di gunakan, salah satunya adalah dengan menambahkan efek hover pada gambar-gambar di blog, misalnya efek rotasi plus shadow seperti ini.

Berbicara mengenai efek gambar blog, Sebelumnya juga saya telah membagikan artikel tentang membuat grow image hover effect, dan juga morph image hover effect dan Brightness image hover effect. Efek Blog lainnya dapat sobat lihat di artikel saya yang lain.

Rotasi + Shadow Image Hover Effect


Cara membuat efek hover rotasi dan bayangan pada gambar postingan Blog
Effect Hover Rotasi + Shadow

Efek berikut ini anda tidak perlu menambahkan script jquery pada template blog, efek berikut ini cukup sederhana yaitu hanya menggunakan CSS. Untuk demonya sobat dapat melihat langsung gambar pada postingan di link di bawah ini, (arahkan kursor mouse ke gambar).




Cara Memasang CSS Image Hover Effect di Blogger


1. Di Blog Blogger 😊
2. Pilih menu Template ➔ Edit HTML
Cara membuat efek hover rotasi dan bayangan pada gambar postingan Blog
Template ➜ Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>
.post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{  transition: all 2s ease-in-out;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
z-index: 999;
box-shadow: 8px -6px 5px rgba(50, 50, 50, 0.75);
}
4. Save template.

Untuk menerapkannya pada postingan blog sobat tinggal mengupload gambar yang sobat inginkan.

Sekian untuk saat ini dan jangan lupa lihat artikel terbaru tentang tutorial blog lainnya. sekian, selamat mencoba, semoga bermanfaat.