Gambar Efek Hover

Memasang Gambar dengan Efek Hover
dan menjadi tombol link ke arah postingan langkah penerapannya sebagai berikut
Login ke akun blog klik tataletak dan klik tambah gadged
copy kode dibawah ini pastekan kedalam gadged tersebut dan klik simpan selesai

Kode 1. Gambar ( oval ) dengan efek hover

<style>#image {
margin: 0px;
padding: 5px;
text-align: center; }

#image img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:90px;
-moz-border-radius:90px;
-o-border-radius:90px;
border-radius:90px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}

#image img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
} </style>

<div id="image">
<a target="_blank" href="Your Link"><img src="http://Link Gambar.JPG" border="0"/></a>

Kode 2. Gambar ( bulat ) dengan efek hover

<style>#image {
margin: 0px;
padding: 5px;
text-align: center; }

#image img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}

#image img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
} </style>

<div id="image">
<a target="_blank" href="http://Your Link">
<img src="http://Link Gambar" style="border-radius: 70px; height:  80px;"" alt="Hover" border="0" />

Kode 3. Gambar ( berputar ) dengan efek hover

<style> #Mys2010 a:hover { background-color: transparent;opacity:0.7; } #Mys2010 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #Mys2010 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style>
<div id="Mys2010"> <a title="Berputar" href="http://Your Link">
<img src="http://Link Gambar" style="border-radius: 3px; height:  75px;"" alt="Berputar" border="0" />

All Sources
Edited by. Myscript2010

DEMO SHOW