Tutorial : Image Hover

Assalamualaikum ,dengan lafaz BISMILLAHIRAHMANIRAHIM ,image hover tu apa ?okie cuba halakan cursor dekat image di atas tue ,taraaa ia betukar kan ?so itulah image hover ,image hover ada banyak patter zoom lah ,senget lahh ,so buat ikut step by step .

Classic Template/Blogskin users  

1. Dashboard > Template
2. Tekan Ctrl +f dan cari code </style> atau <style>
3. Padam Semua kod img {  and img:hover{

Template Designer Users

1.  Dashboard > Design > Edit HTML > Tick Expand Widget Templates
2.  Tekan Ctrl+f dan cari code  /* Header
3.  Padam Semua kod img {  and img:hover{
4.  Sekarang copy code dekat bawah ni

Sini kami bagi banyak pilihan kod ,ada untuk terang ,ada menyeget ,but pilih satu sahaja .

• Gambar jadi terang LIVE PREVIEW 

/*------ 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; }
Gambar jadi melengkung
img {
border-radius:10px;
opacity:0.6;
-webkit-transition-duration:2.5s;
}
img:hover{
border-radius:30px;
opacity:10.8;
-webkit-transition-duration:2.5s;
}

• Gambar jadi zoom atau membesar LIVE PREVIEW

img {
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}

• Gambar jadi menyenget LIVE PREVIEW

img {
border-radius:10px;
border:none;
}
img:hover {
filter:Alpha(Opacity=50,FinishOpacity=0,Style=0);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
padding-left: 160px;
-webkit-transition: 1.5s;
-webkit-transform: rotate(6deg);
}

• Gambar jadi warna grey LIVE PREVIEW

/*------ IMAGE ANIMATION------*/
img, a img {
filter: none;
-webkit-filter: grayscale(0);}
.photo img {
opacity:1;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}
img:hover, a:hover img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}                             

5.  Lepas tu paste di atas code </style> or  /* Header
6. Preview dan save