Cómo hacer una imagen con texto / botón en la parte superior enlazable

Tengo un div que contiene una imagen con texto y un botón encima de él. El texto se posiciona absoluto y cubrirá toda la imagen. Al final del texto también aparecerá un botón. Estoy tratando de que la imagen sea un enlace, pero tengo problemas para hacerlo.

Mi solución actual implica envolver mi imagen y texto dentro de una etiqueta. Esto no funciona, ya que cuando el usuario intenta hacer clic en el botón, debe hacer clic en el enlace en lugar del botón. También he intentado envolver mi etiqueta img dentro de laa etiqueta, pero dado que mi texto está ubicado en la parte superior, el enlace nunca se registrará para que se pueda hacer clic.

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

Respuestas a la pregunta(1)

Su respuesta a la pregunta