Monday 13 May 2013

Tutorial : Image Hover 9 (Terang)


Assalamualaikum . Image hover kali ni , bila cursor dihalakan ke gambar . Gambar akan menjadi terang . Sebelumnya akan jadi kabur lah . Faham kan ? 

Blogskin/Classic Template
1. Dashboard > Template
2. Press F3 dan cari code </style>
3. Copy code di 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; }

4. Paste code di atas code yang korang cari tadi
5. Preview & save

Template Designer
1. Dashboard > Layout > Add a gadget > HTML/Javascript
2. Copy code kat bawah ni
<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>

3. Paste dalam ruangan HTML tadi
4. Preview & save

Credit to : AtinTory

0 comments: