href with a slide in picture - html

Question

i have a slide in over an image as you can see here
http://jsfiddle.net/xt94eah2/4/
when you hover over the example image you get a caption. But, how do i put a link in it?
So only when you hover and you see the grey part with says with some more info that you can then click the image and it goes to a link for example w3schools.
i have the code here
<div class="image revealUpFull">
<img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
and the CSS
div.container {
margin: 50px auto;
width: 675px;
}
div.image {
position: relative;
overflow: hidden;
width: 260px;
height: 195px;
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.3);
}
img {
position: absolute;
left: 0;
top: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
span.title {
width: 260px;
height: 20px;
position: absolute;
background: rgba(30,30,30,0.9);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
div.image.revealUpFull span {
height: 195px;
width: 260px;
bottom: -150px;
}
div.image.revealUpFull:hover img {
top: -150px;
}
div.image.revealUpFull:hover span {
bottom: 0px;
}

Answer 1

This is what you can do if I got it right for your question (You would like the whole slide in area to be clickable?). So you can make both span and a with full width and height of the area.
DEMO: http://jsfiddle.net/xt94eah2/7/
div.image.revealUpFull span {
height: 141px;
width: 150px;
bottom: -120px;
display: block;
}
div.image.revealUpFull span a {
display: block;
height: 100%;
width: 100%;
color: white;
}
There are a few corrections for the markup.
The last </div> is mis-matched.
The inline <img src="" width="150px" height="150px" /> is wrong, it should be width="150" height="150" without px.