, ,

learning some hover effects

In some of the professional sites or blogs you may have seen the change of the appearance of the image (border, opacity, ) if you hover the mouse cursor on it. In this post I m going to share some interesting hover effects. Hover effects can make your image not attractive.

This tutorial uses a simple pattern for adding codes i.e First you will need to add a CSS code just above ]]> and then you will need to add a small HTML code like class=”abc”  to the image code inside your posts. :>

HOW TO APPLY?
1)First upload your image to any host like (photobucket) and get the URL of the image.
eg:http://prativanepal.files.wordpress.com/2008/10/our-photiblog.jpg 
2) Add the respective CSS code just before ]]> of your template layout.
3) Thats it, then you can apply on the image using 
class=”ABC-hover effect name”   href=”http://….”>

for pop up image hover- use this HTML code
class=”thumbnail” href=””>Add Image URL Here” />
Image Description here

YOU CAN ALSO VISIT THIS POST
http://www.merodesign.co.cc/2010/01/change-image-on-over.html

Example:

Happy designing!

Krishna Thapa