Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

how to make images with hover effects clickable

Discussion in 'Website Design Forum:' started by jjdeb10, Mar 15, 2012.

  1. jjdeb10

    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;
    }
     
  2. mrp2049

    mrp2049 Senior Member

Share This Page