Creating mask over entire div on hover - html

Question

I have been trying to create a mask over an image inside a div, but the mask does not cover the entire area of the div (leaves whitespace in the middle). Been trying to fix it but can't find a solution.
This is my progress - http://jsfiddle.net/E2aWr/164/
.image-container {
width: 254px;
height: 280px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.image-container .mask, .image-container .content {
width: 250px;
height: 280px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.image-container img {
display: block;
position: relative;
}
.image-container a.info {
background:url('link.png') center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.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;
}
.effect a.info {
position:relative;
top:-10px;
/* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.effect:hover .mask {
opacity: 1;
border:100px solid rgba(0, 0, 0, 0.7);
}
.effect:hover a.info {
opacity:1;
transition-delay: 0.3s;
}
<div class="image-container effect">
<img src="http://www.istudy.net.my/images/shop/manufacturer/resized/bc_220x280.jpg.png" />
<div class="mask">
Full Image
</div>
</div>

Answer 1

because you have border not background, Remove border from mask and add background
.effect:hover .mask {
opacity: 1;
background-color:rgba(0,0,0,0.7);
}
.effect .mask {
opacity: 0;
overflow:visible;
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}

Answer 2

I remove the border style in this selector .effect .mask and changed the border style to background style.
.image-container {
width: 254px;
height: 280px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.image-container .mask,
.image-container .content {
width: 250px;
height: 280px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.image-container img {
display: block;
position: relative;
}
.image-container a.info {
background: url('link.png') center no-repeat;
display: inline-block;
text-decoration: none;
padding: 0;
text-indent: -9999px;
width: 20px;
height: 20px;
}
.effect .mask {
opacity: 0;
overflow: visible;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
}
.effect a.info {
position: relative;
top: -10px;
/* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.effect:hover .mask {
opacity: 1;
}
.effect:hover a.info {
opacity: 1;
transition-delay: 0.3s;
}
.effect .mask {
opacity: 0;
overflow: visible;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
}
.effect:hover .mask {
opacity: 1;
background: rgba(0, 0, 0, 0.7);
}
<div class="image-container effect">
<img src="http://www.istudy.net.my/images/shop/manufacturer/resized/bc_220x280.jpg.png" />
<div class="mask"> Full Image
</div>
</div>
Hope it helps.