Tutorial : Image Hover 13 (Mirror)

Assalamualaikum . Faham kan mirror tuh apa ? Maknanya , bila korang halakan cursor ke gambar , akan ada bayangan bawah gambar macam pantulan . 

Blogskin/Classic Template

1. Dashboard > Template

2. Press F3 dan cari code </style>

3. Copy code di bawah ni 

img{
padding:4px;
-webkit-box-reflect: below 0px -webkit-gradient
(linear, left top, left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.1)))
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
}
img:hover{
opacity: 1;-webkit-box-reflect: below 0px
-webkit-gradient(linear, left top,
 left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
}

4. Paste code di atas code yang korang cari tadi

5. Preview & save

Template Designer

1. Dashboard > Design > Edit HTML > Tick Expands Widget

2. Press F3 dan cari code ]]></b:skin> 

3. Paste code di atas code yang korang cari tadi

4. Preview & save

*Kalau korang nak gabungkan image hover ni pun boleh . Contohnya , image hover korang ada cermin dengan border sekali . Tak faham ? Tak reti dah nak explain macam mana . Korang buat dulu then tengok okay ? 

Step sama macam kat atas cuma copy code kat bawah ni . Yang atas tu jangan lah copy sebab korang nak buat yang bergabungkan ? Yang atas tu image hover mirror punya . 

img{
margin: 25px; opacity: 0.8; border: 10px solid pink;
/*Transition*/ -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
/*Reflection*/ -webkit-box-reflect: below 0px
-webkit-gradient(linear, left top,
left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
img:hover{
opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px
-webkit-gradient(linear,
 left top, left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

hijau : ketebalan border

merah : code color (boleh ambil kat tutorial)

Credit to : AtinTory