Monday 13 May 2013

Tutorial : Image Hover 10 (Kabur)


Assalamualaikum . Tutorial kali ni , bila korang halakan cursor ke gambar . Gambar tu akan menjadi kabur . Pada mulanya dia terang lah . Faham kan ? Okay jum buat tutorial ni . 

Blogskin/Classic Template
1. Dashboard > Template
2. Press F3 dan cari code </style>
3. Copy code di bawah ni 
 img{
opacity: .70;
-webkit-transition: 1.4s;
 -moz-transition: 1.4s;
border-radius:10px;}

img:hover{
border-radius:30px;
-webkit-transition: 1.4s;
 -moz-transition: 1.4s;
opacity: 100.0; }
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 1 ----- */
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
.post a:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
</style>

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

Credit to : AtinTory

0 comments: