Tutorial : Zoom Opacity Image Hover

لسّلا م عليکم ورحمةالله وبرکة | Hai hai hai, Najla buat tuto lagi!

Hi and Assalamualaikum. Today i want to write a tutorial on Zoom Image Hover. Nana, who ask me about how to make that image hover.

Opss. This is VERY-VERY IMPORTANT PERSON! This tutorial credit to her, Teacher AMALINA.


That would be like this,
when cursor touch it, that can be hover. 
(that can be image opacity and zoom it!)                                                                          

if you interested, just follow this step :D

1. Login your blog . --> Dashboard --> Template --> Edit html.

2. Now click ctrl + f  or click f3 to find <head>

3. Copy this code and then paste it above <head>  .

<style>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2); }

4. Click preview. if nothing error, click Save.

5. Now preview your blog and just touch your image with cursor! does it be? Please tell me it can be :D

Byebye. Wassalam. see you again!

Maaf tetiba terngada-ngada nak speaking. Tak apa, practice BI untuk upsr tak salah kan? Cuba baca balik, Masya'Allah! berterabur bahasa inggeris ku! Eh eh, jangan ketawa eh najla speaking. ini semua salah TRANSLATE GOOGLE. 
 P/S : Google translate kena masuk tadika balik. Tak kira! Bahasa Melayu macam bahasa Indonesia. Bahasa Inggeris macam bahasa planet marikh. Jangan percaya dengan translate gooooooogle tu ok. :P



Comments