Nah, kesempatan ini admin akan coba berbagi tutorial blog efek hover yang memang sudah pernah admin posting di blog lama admin.

Yah, sob efek hover flipping content ini akan terlihat ketika pointer mouse di arahkan pada gambar yang di kasi efek ini.

Efek ini bisa kamu gunakan juga loh pada blog blogspot kamu, bisa membuat tampilan blogmu lebih keren loh guys, ok cekidot.

Efek Hover Flipping Pada Gambar


Efek Hover Flipping
Efek Hover Flipping

Arahkan kursor mouse pada gambar di halaman demo di bawah ini untuk melihat efeknya lebih jelas.


Bagaimana, ingin coba membuatnya juga? ikuti saja langkah-langkah di bawah ini guys.

Cara Membuat Efek Hover Flipping di Blogger:


1. Blog kamu di Blogger 😊
2. Pilih menu Template ➔ Edit HTML
3. Selanjutnya letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>

.gibandotnet-card { position:relative; height:300px; width:300px; margin:20px auto; }
.gibandotnet-card > div { position:absolute; left:0; top:0; width:300px; height:300px; padding:20px; background:#3C404B; -webkit-transition:1.5s ease-in-out; -moz-transition:1.5s ease-in-out; transition:1.5s ease-in-out; }
.gibandotnet-card > div.back { background:#000; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(180deg); -webkit-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg); }
.gibandotnet-card > div.front { -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(0deg); -webkit-transform:perspective(800px) rotateY(0deg); transform:perspective(800px) rotateY(0deg); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
.gibandotnet-card:hover > div.back { -moz-transform:perspective(800px) rotateY(0); -webkit-transform:perspective(800px) rotateY(0); transform:perspective(800px) rotateY(0); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
.gibandotnet-card:hover > div.front { -webkit-transform:perspective(800px) rotateY(-179.9deg); -moz-transform:perspective(800px) rotateY(-179.9deg); transform:perspective(800px) rotateY(-179.9deg); }

4) Masukan kode ini dalam postingan dengan mode HTML (Sebelahnya Compose).

<div class="gibandotnet">
<div class="front">
<img src="Link Gambar Depan"/>
</div>
<div class="back">
<img src="Link Gambar Belakang" />
</div>
</div> 

Ganti kode berwarna biru diatas dengan url/link gambar depan dan ganti kode berwarna merah diatas dengan url/link gambar belakang.

Selamat mencoba guys.
0 Komentar untuk "Ok Guys, Yuk Buat Efek Hover Flipping Pada Gambar Blog!"