tutorial - image hover 2 in 1

Hari ni ain nak ajar korang macam mana nak buat image hover pada gambar .  Ok tuto ni ada 2 pilihan . Jadi korang boleh pilih yang mana korang berkenan :)

1) Hover pertama adalah bila korang sentuh pic tu , dia akan scroll ke warna asal .

2) Hover kedua pulak bila korang sentuh pic tu , dia akan jadi warna putih .

Dua-dua comel . Tapi kal
au ain , ain pakai yang first tu . Kalau korang nak buat , ikut tuto ni . 


Hover I

1.dasboard - design - edit html - tick expand widget template
2.copy code neyy : /* Header
3.copy code ney :

 /*------ IMAGE ANIMATION------*/img, a img { border: 0px;  opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }


4.paste di ATAS code  /* Header


5.preview - then save !
Hover II


1.dashboard - design - edit html - tick expand widget template
2.cari code neyy : <head>
3.copy code neyy :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){$(".post img").fadeTo("slow", 1.0);$(".post img").hover(function(){$(this).fadeTo("slow", 0.5);},function(){$(this).fadeTo("slow", 1.0);});});</script><script type='text/javascript'>$(document).ready(function(){$(".latest_img").fadeTo("slow", 1.0);$(".latest_img").hover(function(){$(this).fadeTo("slow", 0.5);},function(){$(this).fadeTo("slow", 1.0);});});</script>


4.paste di ATAS code <head>

5.previes - then save !

THANKS FOR READING THIS :) LIKE IF YOU LIKE ♥

1 ♥:

dina said...

terima kasih ye . Dah jadi :D