Question

I have an image link. When the user hovers over the image, an info panel appears over the top, whilst the image is still visible underneath. The problem is, the image link is not clickable because the info panel is covering it.

My question: How do I make the image link clickable (or how do I change the code so the effect is the same but the entire image can be clicked)?

UPDATE: I want to have normal links that don’t use jQuery to be clickable. See my comment for my reasons.

Working Demo with HTML, jQuery and CSS

http://jsbin.com/ufecob/2/edit#html,live

HTML

<figure class="item">
    <a href="http://google.com/" title="Thumb"><img src="http://f.cl.ly/items/2u2i3K1H1d1D02072T3Q/soc-google.png" /></a>
    <figcaption class="name visuals"><h1>Title</h1><p>Description</p></figcaption>
</figure>

jQuery

$(document).ready(function(){
    $('.item').hover(function(){
        $(this).children('.name').stop().fadeTo(100, .5);
    },function(){
        $(this).children('.name').stop().fadeTo(900, 0);
    });
});

CSS

#items {
        padding:0px;
        display:block;
    }
#items .item {
        display:block;
        position:relative;
        float:left;
        width:200px;
        max-width:200px;
    }
#items .item a {
        display:block;
        text-decoration:none;
        position:relative;
    }
#items .name a:hover {
        color: #000;
    }
#items .item .name {
        display: none;
        background-color: #000;
        color: #fff;
        position: absolute;
        left: 0px; top: 0px;
        margin: 0px;
        width: 100%; height: 100%;
    }

Answer 1

How about adding CSS to make the cursor a pointer and then some jQuery to add a click handler to the overlay:

CSS–

.name {
    cursor : pointer;
}

JS–

$('.name').on('click', function () {

    //this will find the link that is the overlay's sibling, find its href attribute, and forward the user to that URL
    window.location = $(this).parent().children('a').attr('href');
});

Here is an updated version of your jsbin: http://jsbin.com/ufecob/3/edit

Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.

UPDATE

How about changing the structure of your HTML so that the link is the parent of the figure tags:

<a href="http://google.com/" title="Thumb">
    <figure class="item"> 
        <img src="http://f.cl.ly/items/2u2i3K1H1d1D02072T3Q/soc-google.png" /> 
        <figcaption class="name visuals"><h1>Title</h1><p>Description</p></figcaption> 
    </figure>
</a>

Here is a demo: http://jsbin.com/ufecob/4/edit#html,live