There are a lot more that we can do with Image hover. We can use hover into web page design, minimize clutter, and display additional description information. The following CSS tutorial is to Create  Image Hover Effect with URL Link Option menu.

Open your CSS file and add this code :

img {
border: none;;
}

.imgblock {
padding: 8px;
border: solid 1px #666;
background: #CCCBB5;
position: relative;
margin-right: 5px;
text-align: center;
float:left;
}
.imgblock p, .imgblock p a{
text-align: center;
color:#FFF;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:12px;
padding-top: 9px;
}
.imgblock p span{
text-align: center;
color:#FF0;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:10px;
padding: 5px 5px 10px 5px;
float:left;
}
.imgblock p a:hover{
color:#F00;
}
.imgblock .url{
text-align: center;
background: #000;
position: absolute;
bottom: 0px;
display: none;
opacity:0.8;
width:250px;
bottom:-5px;
}
.imgblock:hover .url {
display: block;
color: #F00;
}

Add this to your HTML web page

BUY NOW! | VIEW DETAIL
sample description here sample description here sample description here sample description here...

DEMO IMAGE OVER

BUY NOW! | VIEW DETAIL sample description here sample description here sample description here sample description here...