Нажатие ссылки разрывается, когда под другим элементом

Question

У меня есть ссылка на изображение.Когда пользователь наводит курсор на изображение, над ним появляется информационная панель, а изображение все еще видно под ним.Проблема в том, что ссылка на изображение не активируется, потому что информационная панель закрывает его.

Мой вопрос: как сделать ссылку на изображение кликабельной (или как изменить код, чтобы эффект был таким же, номожно щелкнуть по всему изображению)?

ОБНОВЛЕНИЕ: Я хочу иметь обычные ссылки, которые не используют jQuery, чтобы быть кликабельным.См. Мой комментарий по моим причинам.

Рабочая демонстрация с HTML, jQuery и 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

Как насчет добавления CSS, чтобы сделать курсор указателем, а затем некоторого jQuery для добавления обработчика щелчков в оверлей:

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');
});

Вот обновленная версия вашего jsbin: http://jsbin.com/ufecob/3/edit

Обратите внимание, что .on() является новым в jQuery 1.7 и в этом случае совпадает с .bind().

UPDATE

Как насчет изменения структуры вашего HTML-кода, чтобы ссылка являлась родителем тегов figure:

<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>

Вот демоверсия: http://jsbin.com/ufecob/4/edit#html,live