Make an entire div linked after hover rather than only the icon - html

Question

I am using the following tutorial http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index_3.html as a hover effect for two images I have. When you hover over them though, only the magnifying glasses are linked, I would like it so after you hover the entire area is linked. Is it at all possible? I have been playing around with it but cannot get it to work. Any help would be greatly appreciated.
Here is the HTML
<div class="view third-effect">
<!-- Image goes here -->
<div class="mask"><a href="#" class="info" title="Full Image">
<span class="glyphicon glyphicon-search"></span>
</a></div>
<div class="content">
</div>
</div>
And here is the CSS
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info .glyphicon .glyphicon-search {
/* background:url(../img/link.png) center no-repeat; */
position: relative;
top: 1px;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
content: "\e006";
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.third-effect a.info .glyphicon .glyphicon-search {
position:relative;
top:70px; /* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
transition-delay: 0.3s;
}

Answer 1

This worked OK in my test:
Modified CSS:
.view a.info {
background:url(/images/link.png) center no-repeat;
/*display: inline-block;*/
text-decoration: none;
padding:0;
text-indent:-9999px;
/*width:20px;
height:20px;*/
display: block;
width: 300px;
height: 200px;
}
Also comment out the "border:100px" parts (there are two places I found):
/*border:100px solid rgba(0,0,0,0.7);*/
That's it, the full thumbnail can now be clicked, while the hover effect with mag glass remains as before.