how to make images with hover effects clickable

jjdeb10

Junior Member
Hi all,

South West Skin | Beauty

I'm just making one of my first sites and i seem to be doing ok up until now but i've come stuck with something probably quite simple. I have hover effects on some images and i need them to be clickable but i cant seem to get it to work through a load of different methods. ive tried hotspots and linking the image directly and also moving the overlay z-index beneath the demo div tag but nothing seems to work. any help would be much appreciated. The link is South West Skin | Beauty

css code for the hover effect:

.ic_container{
vertical-align:baseline;
margin:10px;
position:relative; /*-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-box-shadow: 0 1px 3px #;
-webkit-box-shadow: 0 1px 3px #;*/
}
.overlay{
opacity:0.3;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.ic_caption{
position:absolute;
opacity:0.6;
overflow:hidden;
margin:0px;
padding:0px;
left:0px;
right:0px;
cursor:default;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.ic_category{
text-transform:uppercase;
font-size:11px;
letter-spacing:3px;
padding:5px;
margin:0px;
}
.ic_caption h3{
padding:5px 5px 5px 5px;
margin:0px;
font-size:24px;
}
.ic_caption h4{
padding:7px 5px 7px 5px;
margin:0px;
font-size:20px;
}
.ic_text{
padding:5px;
margin:0px;
text-align:center;
font-size:15px;
}
.content{
margin-top:80px;
padding:0px;
bottom:0px;
}
.about{
width:100%;
height:200px;
background-color:#AFD9E4;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
clear:both;
}
.about .text{
width:45%;
margin:5px 2% 10px 2%;
height:180px;
float:left;
color:#444;
font-size: 12px;
text-align:justify;
letter-spacing:0px;
}
.about .text h1{
border-bottom: 1px dashed #fff;
color:#fff;
}
#content-boxes {
height: auto;
width: 890px;
margin: 0px 0 0 76px;
float: left;
}
.demo{
float:left;
margin: 20px 0 0px 30px;
}
 
Back
Top