Dark And Light Picture Effects

Dark And Light Picture Effects On The Blog Post

When bloggers write an article, usually it can not be separated from the image as a complement to an article that aims to provide a description / explanation of the article or as a complement. Actually the picture / image on the post could be given a little additional effects to enhance your appearance by making use of hover effects. When the mouse pointer is in the picture you will see a change where the images are initially visible light will turn dark. For you all who would like to try please follow these simple tips.

  • Login to your Blogger account
  • Choose a Design, edit HTML
  • Tick the expand widget templates
  • Find this code : ]]></ b:skin> (you can press Ctrl-F to search in Mozilla Firefox)
  • Copy and paste the code below and put the above code ]]></ b:skin>
CSS code of light into darkness:
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
If you would alter the effect of darkness into light, you can just reverse the placement of code like this:
.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
  • Save and open your blog to see results

So simple tips to give effect to light / dark on image posting, hopefully useful and can provide beautiful shades on image posting.

1 comments:

TopHTML said...

Great tool Jimdaniel, it's easy to use

Post a Comment