Saturday, 20 April 2013

Tutorial : Image Hover 3 (Zoom)




Assalamualaikum , kita ke image hover kedua iaitu bila cursor sentuh gambar , dia akan zoom . Haa , nak tak macam tuh ? Okay , jom kita mulakan ! 

Classic Template 
1. Dashboard > Template
2. Press F3 dan cari code </style>

Template Designer
1. Dashboard > Design > Edit HTML > Tick Expand Widget Templates
2. Press F3 dan cari code </style>

3. Now , copy code bawah ni 
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;
}
4. Paste atas code </style> tadi atau /*Header
5. Preview & save .

0 comments: