Eu tenho um div que contém uma imagem com texto e um botão sobre colocado em cima dela. O texto é posicionado absoluto e cobrirá toda a imagem. No final do texto também será um botão. Estou tentando fazer com que a imagem seja um link, mas estou com problemas para fazer isso.

Minha solução atual envolve envolver minha imagem e texto em uma tag. Isso não funciona quando o usuário tenta clicar no botão, eles clicam no link em vez do botão. Eu também tentei envolver apenas minha tag img dentro doa mas, como meu texto está posicionado na parte superior, o link nunca será registrado como clicável.

http://jsfiddle.net/NxtWa/

HTML:

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

CSS:

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