Making a link the full size of the block - html

Question

I'm adapting a portfolio code that was kindly posted by James here: http://codepen.io/SeamlessThemes/pen/LiBdo
I've managed to change most things that I need, but I can't for the life of me get the href to cover the responsive block. At the moment only the "View" link and padding are active.
I'll reproduce the code here so that you don't need to visit codepen if you'd rather not
* {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.view {
width: 32.33%;
height: auto;
margin-right: 0px;
float: left;
border: 1px solid #e5e5e5;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #079;
}
.view:last-child {
margin-right: 0px;
}
.view .mask, .view .content {
width: 32.33%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: #222;
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
.view-portfolio img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-portfolio .mask {
background-color: #222;
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-portfolio h2 {
background: #222;
color: #FFF;
}
.view-portfolio p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #FFF;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-portfolio:hover .mask {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.view-portfolio:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
.view-portfolio:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
<div class="view view-portfolio">
<img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
<div class="mask">
<h2>Portfolio Item 1</h2>
<p>This is an example portfolio item exceprt.</p>
View
</div>
</div>
<div class="view view-portfolio">
<img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
<div class="mask">
<h2>Portfolio Item 2</h2>
<p>This is another example portfolio item exceprt.</p>
View
</div>
</div>
<div class="view view-portfolio">
<img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
<div class="mask">
<h2>Portfolio Item 3</h2>
<p>This is yet another example portfolio item exceprt.</p>
<a href="#" class="info">View</>
</div>
</div>

Answer 1

.view a.info {
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
}
You can adjust it accordingly.

Answer 2

I don't really understand the question but if you want a link on the image...
<div class="view view-portfolio">
<a href="http://www.w3schools.com/html/">
<img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
</a>
<div class="mask">
<h2>Portfolio Item 1</h2>
<p>This is an example portfolio item exceprt.</p>
View
</div>
</div>