У меня есть div, который содержит изображение с текстом и кнопку поверх него. Текст позиционируется абсолютно и будет охватывать все изображение. В конце текста также будет кнопка. Я пытаюсь сделать изображение ссылкой, но у меня проблемы с этим.

Мое текущее решение включает в себя как мое изображение и текст вa тег. Это неЭто не так, как если бы пользователь пытался нажать кнопку, вместо кнопки он нажимал на ссылку. Я также попытался обернуть только мой тег img внутриa тег, но так как мой текст расположен сверху, ссылка никогда не будет зарегистрирована как кликабельная.

http://jsfiddle.net/NxtWa/

HTML:

    <a href="http://www.google.ca">
        <img src="http://www.placehold.it/480x260">
        
            <p>Long long paragraph</p>
            Button
        
    </a>

CSS:

.tile { position:relative; width:480px; height:260px; }
.tile .text { position:absolute; top:0px; left:0px; width:480px; height:260px; }