Image in <a> not working after applying hover effects - html

Question

first of all, here's my code: http://codepen.io/anon/pen/BbklG.
After applying my hover effects, the image link isn't clickable.
How do I make my image clickable while maintaining this hover effect? Thanks!
<div class="view view-sixth">
<img src="http://static.oprah.com/images/200212/omag/200212-omag-ripple-effect-600x411.jpg" border="0">
<div class="mask">
<h2>Image Description</h2>
</div>
</div>
.view {
margin:0 auto;
width: 350px;
height: 230px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 350px;
height: 230px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
font-family: "Lato";
font-weight: 300;
text-transform: uppercase;
color: #fff;
vertical-align: middle;
text-align: center;
position: relative;
font-size: 30px;
}
.view-sixth img {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask {
pointer-events:none;
background-color: rgba(230,203,226,0.7);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-in 0.1s;
-moz-transition: all 0.3s ease-in 0.1s;
-o-transition: all 0.3s ease-in 0.1s;
-ms-transition: all 0.3s ease-in 0.1s;
transition: all 0.3s ease-in 0.1s;
}
.view-sixth h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-o-transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
-ms-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}

Answer 1

Wrap your elements in a or simply add this line to your CSS:
.view-sixth .mask {
pointer-events:none;

Answer 2

the reason the image is not clickable is because your "mask" div is covering right over it. You are using absolute positioning to put a block level element over the top of another block element.
I would suggest wrapping the mask div inside the anchor tag with the image see how that works.

Answer 3

<div class="view view-sixth">
<a href="http://www.stackoverflow.com"><img src="http://static.oprah.com/images/200212/omag/200212-omag-ripple-effect-600x411.jpg" border="0">
<div class="mask">
<h2>Image Description</h2>
</div></a>
</div>
You missed a closing div and your closing a tag was in the wrong place works with the above code.