Monday 24 December 2012

Reflection image hover



Assalamualaikum and hello everybody ... today I want to make a tutorial about reflection effect on image...for example  try hovering over the image above...

Firstly as usual : Dashboard --> Template --> Edit HTML

For template designer : Denim,simple,watermark...
Search the code    img{   or  img {  or   a img {  then, replace the code with the code I have given below...

For classic template and blogskin...
Search the code   img{  or  img {  then, replace the code with the code I have given below...

If there is no code like above add the code that I have given before  </style>   for blogskin and before
]]></b:skin>   for template designer.


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)));
}

Done? do comment if you do not understand anything...^^

No comments:

Post a Comment