learning some hover effects

tttttt
YYY
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 ]]></b:skin> 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 ]]></b:skin> of your template layout.
3) Thats it, then you can apply on the image using 
<a class="ABC-hover effect name"   href="http://...."><img src="Add Image URL Here"  /></a>







1) DARK BLACK BORDER
CSS

.black-white {
  padding:5px;
border:1px solid #ccc;
  }
.black-white:hover {
padding:5px;
  background-color:#fff;
border:10px solid #000;
  }

HTML
class="black-white"




2 DASHED BORDER
CSS
.dashed {
  padding:5px;
border:1px solid #ccc;
  }
.dashed:hover {
padding:5px;
  background-color:#fff;
border:2px dashed #000;
  }
HTML
class="dashed"




 

3 CURTAIN STYLE
CSS
.curtain {
  padding-top:10px;
  padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
  }
.curtain:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }


HTML
class="curtain"



 

4 FADE EFFECT
CSS
.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

HTML
class="fadein"






5 IMAGE POP UP IFFECT
CSS
 .thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}

HTML
class="thumbnail"






for pop up image hover- use this HTML code
<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>

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

Example:








Happy designing!

Krishna Thapa

Post a Comment

.