Efek Hover Berputar Pada Gambar. Pada kesempatan ini kembali lagi seocips.com akan membagikan membuat efek pada gambar, dan berikut ini adalah cara membuat efek hover berputar pada gambar blog  dengan menggunakan CSS saja. Efek seperti ini hampir sama dengan postingan sebelumnya tentang efek zoom berputar pada gambar.

Keuntungan menggunakan efek seperti ini adalah untuk membuat tampilan blog kita menjadi kelihatan lebih menarik, efek ini akan terlihat ketika kursor mouse diarahkan pada gambar yang telah kita pasangi efek ini. Efek ini juga dapat anda tampilkan di sidebar blog anda, salah satu blog yang menggunakan efek gambar berputar ini dan diletakan di sidebar blog andalah Trik Mudah Seo Blogspot.

Seperti di artikel pada sebelumnya dimana saya telah membagikan tentang cara membuat efek rotasi pada gambar. dan juga membuat wow slider with thumbnails atau efek hover dengan bayangan pada gambar blog. Untuk Live demo Efek Hover Berputar Pada Gambar adalah seperti pada gambar dibawah ini.

Live Demo

template blog

Cara Membuat Efek Zoom Berputar Pada Gambar di Blog

1) Masuk ke dashboard blogger lalu klik Template
2) Cari tag penutup ]]></b:skin> atau </style> ( kalau kode </style> ada lebih dari 1 silahkan coba dimana yang cocok
3) Pastekan CSS di bawah ini tepat di atas tag penutup ]]></b:skin> atau </style>
.pic { height:280px; width:280px; overflow:hidden; border:0 solid white; margin-bottom:20px; -webkit-box-shadow:5px 5px 5px #111; box-shadow:5px 5px 5px rgba(0,0,0,0.5); }
.pic:hover { cursor:pointer; }
.morph { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.morph:hover { border-radius:50%; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }
Untuk menerapkannya adalah seperti dibawah ini
<div class="morph pic">
<a href="Link Tujuan" target="_blank"><img src="Link Gambar" alt="template blog di seocips"/></a>
</div>
Catatan:
Ganti tulisan Link Tujuan dengan link / url / alamat tujuan jika gambarnya di klik, kemudian ganti tulisan Link Gambar dengan url/link gambar milik anda, kemudian ganti tlisan warna hijau dengan alt gambar / deskripsi gambar.

Ok sekian cara membuat efek gambar berputar, selamat mencobat.
0 Komentar untuk "Cara Membuat Efek Hover Berputar Pada Gambar"