Sunday, July 22, 2012

Tutorial : Image Hover Stlye 1


Tumblr_m1govlycpt1qzgt9no1_500_large
Hye ! annyeong . Ok atin tau , dah lama tak buat tuto . Sekarang ada masa atin buat k . Kali nak share tuto image hover . 
Yang stlye 1 ni , atin ajar image hover terang .. Dah tau kan? so tak yah nak panjangkan cerita lagi jom mula

 

For Blogskin 

 Dashboard > Template > Edit HTML
 Tekan ctrl + f serentak dan cari code </style>
 Copy code bawah ni:
/*------ 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; }

 Paste code tadi di atas  </style>
 Preview & save.




For Design

 Design > Add Gadget > Html/JavaScript
 Copy code bawah ni dan paste di dalam Html/JavaScript

    <style>
    /* ----- Image opacity effect 2 ----- */
    .post a img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;
    }

    .post a:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0;
    }
    </style>

 SAVE dan lihatlah hasilnya.

No comments: