Tutobies section by NF


THE OWNER


WeChat


Image hover (part 7)
Saturday, November 24, 2012 • 10:12 PM • 0 comment{s}


This is the live preview. You can see it better in black background.

Assalamualaikum.

Bosan pulak hari nie >.< today I wanna teach you about reflection image hover. If you hover the picture, you can see the reflection. You can see it better in black background. Black backgrounddd. Lol, i always babbling in my blog. Eh, suke hati ai la. LOL okay jom start. Hehe.


Classic Template

  • Dashboard > Template.
  • Ctrl+F, cari kod img { atau sama jenis dengannya.
  • Kalau dah jumpa kod tersebut, sila padam kod img { lama anda dan gantikan kod di bawah.
  • Paste kat atas </style>.
Template Designer

  • Dashboard > Template > Edit HTML > Proceed.
  • Ctrl+F, cari kod img { atau sama jenis dengannya.
  • Kalau dah jumpa kod tersebut, sila padam kod img { lama anda dan gantikan kod di bawah.
  • Paste kat atas /* Header
img {
border:0px solid #ddd;
padding:3px;
}

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)));
}
Credit : everythingtumblr