CODEWITHSUNDEEP
htmlcssimage
cvbattum
cvbattum

Reputation: 799

Hyperlink on image with overlay

In a previous question, I asked how to add a transparent white overlay on an image. However, I now want a link on that image. What I did was put an <a> element around the image, inside a <li> element. This gives me a very strange result. Under the image, there is an invisible space, which is the hyperlink. See this screenshot made with the firefox element inspector: The box is the hyperlink. the image covers the link, so only the little space uncovered is clickable

Here you see the link is positioned really weird. Also, the image covers the link, so only the little space that isn't covered is clickable.

Here is the HTML of the images block:

<div id="middle_content_images">
    <ul>
        <li><a href="#"><img class="homepage_featured_img" src="img/featured_1.jpg" /></a></li>
        <li><a href="#"><img class="homepage_featured_img" src="img/featured_2.jpg" /></a></li>
        <li><a href="#"><img class="homepage_featured_img" src="img/featured_3.jpg" /></a></li>
        <li><a href="#"><img class="homepage_featured_img" src="img/featured_4.jpg" /></a></li>
    </ul>
</div>

And some of the style:

/* images homepage */
#middle_content_images ul {
    display: inline-block;
}

#middle_content_images ul li {
    float: left; 
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
    height: 200px;
}

#middle_content_images ul li:last-child {
    margin-right: 0px;
}

#middle_content_images ul li img, #middle_content_images ul li:after {
    border-radius: 178px/100px;
    transition: 250ms ease-out;
}

#middle_content_images ul li:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
}

#middle_content_images ul li:hover:after {
    opacity: .2;
}

#middle_content_images ul li:hover img, #middle_content_images ul li:hover:after {
    border-radius: 20px;
}

I already tried a few things, and I discovered that, when you completely remove the :after selector (so, the hover), you can click the whole image. However, when I viewed it in the inspector, it showed up the same as shown in the image. I'm really out of ideas on how to fix this.

Upvotes: 2

Views: 5385

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25944

Apply the :after overlay on the a instead of the li. This works

#middle_content_images ul li a img, #middle_content_images ul li a:after {
    border-radius: 178px/100px;
    transition: 250ms ease-out;
}
#middle_content_images ul li a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
}
#middle_content_images ul li:hover a:after {
    opacity: .3;
}
#middle_content_images ul li:hover a img, #middle_content_images ul li:hover a:after {
    border-radius: 20px;
}

jsFiddle

Upvotes: 2

Related Questions