Playing with Hover Efect

Banyak hal sebenarnya yang dapat kita lakukan, bahkan hanya dengan sebuah efek hover. Jika kita sedikit kreatif maka berbagai hal menarik dapat tercipta, salah satunya adalah melalui beberapa kode di bawah ini.

Kode CSS :

.GRcrazyEffect{
       position:relative;
       display:block;
       float:left;
       margin:5px 15px 5px 0;
       padding:8px;
       border:4px double #555;
       border-bottom-color:#888;
       border-right-color:#888;
       border-radius:12px;
       height:400px;
       width:330px;
       background:#CCC;
       opacity:0.9;
       filter:alpha(opacity=90);
}
.GRcrazyEffect,.GRcrazyEffect img.asli,.GRcrazyEffect img.crazy{
       transition:1.5s ease-in 0.5s;
       -o-transition:1.5s ease-in 0.5s;
       -moz-transition:1.5s ease-in 0.5s;
       -webkit-transition:1.5s ease-in 0.5s;
       -ms-transition:1.5s ease-in 0.5s;
}
.GRcrazyEffect:hover,.GRcrazyEffect:hover img.crazy{
       opacity:1.0;
       filter:alpha(opacity=100); 
}
.GRcrazyEffect img.asli,.GRcrazyEffect img.crazy{
       position:absolute;
       padding:0;
       margin:0;
       border:3px solid #222;
       border-radius:5px;
       box-shadow:0 0 8px #fff;
       left:5px;
       top:5px;
}
.GRcrazyEffect:hover img.asli,.GRcrazyEffect img.crazy{ 
       opacity:0.0;
       filter:alpha(opacity=0);
       z-index:-10;
}
.GRcrazyEffect:hover img.crazy{ 
       z-index:100;
}

1. Simpan kode CSS tersebut di atas kode ]]></b:skin>
2. Gunakan xHTMl di posting atau simpan melalui add a Gadget.
3. Jangan lupa sebelum simpan kode CSS untuk melakukan proses backup template.
4. Panduan cara menyimpan kode, cara mencari kode dan cara backup template bisa nada baca pada Special Tutorials di gubhugreyot.

xHTML :

<a class="GRcrazyEffect" href="Your URL here!" title="Your title here!"><img class="asli" src="image-1.jpg" width="330" height="400" /><img class="crazy" src="image-2.jpg" width="330" height="400" />
</a>

Sampel xHTML :

<a class="GRcrazyEffect" href="http://tantytm.blogspot.com/" target="_blank" title="Efek Gila"><img class="asli" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJ6QThTcU4o7IImABYPAHHAkFoZywRqMeBRkLzOpx1-3RxNh67i4FEpK0B_m8j4EOiaywVIFuT0CqrdLgqRz5dcDlxq5bW8QwP0-Me2jrYKCUEw846HVAMuKD1QWA5imtl1I7-Mx8c5XT/s300/GRcantik-rollover.jpg" width="330" height="400" /><img class="crazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXzZUEeEWu3MDnqgUg6fCP4PDoqTC57n-GVTCr_v8eGhNTlZ7cVUb_WnD7NmthLXoHe4ijNbriEasfTIq2zfvSticN_nyDxnva_VaPxeOLvPnN_KWOVvZZMHYJfIenv6WSsIhKJYvupMd/s300/GRcantik-rollover-hover.jpg" width="330" height="400" />
</a>

D E M O :