• 1
  • 2
Home > Tips

Image Hover Effects - How to Make Image Hover Effects




 

View the Demo Free Download the Admin Dashboard Template


When visiting a website especially some galley websites, you will find that when your mouse hovers over the image, there will be an image hover effect. Do you think it is cool?

In this article, Id like to share some of my skills on image hover effects and I will also share the related codes with you in case you want to learn something from the image hover effects sample.

Note: If you like the image hover effects I shared here, you can free download the sample by clicking the Download button above and then you can edit it for whatever purpose.




 The HTML Codes of the CSS3 Pricing Table

<div id='index_tags'>
<a href='#'>
<img width='115' height='115' src='http://list.image.baidu.com/t/image/w_meinv.jpg'>
<p>Beauty</p>
</a>
...
<a href='#'>
<img width='115' height='115' src='http://list.image.baidu.com/t/image/w_meinv.jpg'>
<p>Beauty</p>
</a>
</div>

The above HTML codes only show you the first image (Beauty) that with image hover effects. You can copy the all the contents within the <div id='index_tags'>all the contents</div> and then paste the contents to add more images.

Note: After pasting the contents within the <div id='index_tags'>all the contents</div>, please dont forget to replace the copied contents with new contents.




 The CSS Codes for the Image Hover Effects

body{
background:none repeat scroll 0 0 #fff;
font:12px arial;
text-align:center;
position:relative
}
body,p,form,ul{
margin:0;
padding:0
}
img{
border:0
}
td,p,div{
font-size:12px
}
p{
width:600px;
margin:0;
padding:0
}
a{
color:#00c
}
a:active{
color:#f60
}

#index_tags{
width:625px;
position:relative;
left:5px;
margin:30px auto 15px auto;
font-size:0;
}
#index_tags a{
display:inline-block;
width:115px;
height:115px;
margin:0 10px 10px 0;
position:relative;
text-decoration:none
}
#index_tags a img{
position:absolute;
left:0;
top:0;
background:#fff;
width:115px;
height:115px
}
#index_tags a p{
position:absolute;
width:100%;
bottom:0;
left:0;
border-top:1px solid #222;
height:22px;
line-height:22px;
color:#fff;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99333333', endColorstr='#99333333');
background:rgba(51,51,51,0.6);
cursor:pointer
}
#index_tags a:before,
#index_tags a:after {
content:'';
display: block;
width: 116px;
height: 116px;
left:-5px;
top:-5px;
border: 4px solid #fff;
background:#666;
visibility:hidden;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
-o-background-clip: padding-box;
-ms-background-clip: padding-box;
background-clip: padding-box;
box-shadow: 0 0 1px #aaa,0 0 2px #aaa;
-webkit-transition:-webkit-transform 0s ease-in;
-moz-transition:-moz-transform 0s ease-in;
-o-transition:-o-transform 0s ease-in;
transition:transform 0s ease-in;
position:absolute;
}

#index_tags a:link,
#index_tags a:visited{
text-decoration:none
}
#index_tags a:hover{
zoom:1;
z-index:20;
text-decoration:underline
position:relative;
}
#index_tags a:hover:before,
#index_tags a:hover:after{
visibility:visible;
}
#index_tags a:hover:before{
-webkit-transform:rotate(8deg) translate(6px,-1px);
-moz-transform:rotate(8deg) translate(6px,-1px);
-o-transform:rotate(8deg) translate(6px,-1px);
-ms-transform:rotate(8deg) translate(6px,-1px);
transform:rotate(8deg) translate(6px,-1px);
z-index:2;
}
#index_tags a:hover:after{
-webkit-transform:rotate(-8deg) translate(-5px,1px);
-moz-transform:rotate(-8deg) translate(-5px,1px);
-o-transform:rotate(-8deg) translate(-5px,1px);
-ms-transform:rotate(-8deg) translate(-5px,1px);
transform:rotate(-8deg) translate(-5px,1px);
z-index:1;
}
#index_tags a:hover img{
left:-5px;
top:-5px;
padding:4px;
border:1px solid #aaa;
-moz-box-shadow:1px 1px 3px #888;
-webkit-box-shadow:1px 1px 3px #888;
box-shadow:1px 1px 3px #888;
z-index:3;
}
#index_tags a:hover p{
text-decoration:underline;
z-index: 4;
}




 Terms of Use

The image hover effects template is created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the image hover effects template and then edit it for their own use. If you are interested in this image hover effects template, please feel free to download it. If you have problem understanding or editing the image hover effects template, please feel free to contact our support team (support@slicemaker.com) for help.



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0