在懸停的整個div上創建遮罩

Question

我一直試圖在div內的圖像上創建一個遮罩，但遮罩並未覆蓋div的整個區域（在中間留下空白）。一直試圖解決它，但無法找到解決方案。

這是我的進步 - 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"> 
 
     <a href="#" class="info" title="Full Image">Full Image</a> 
 
    </div> 
 
</div>

Answer 1

，因爲你有沒有邊框的背景下，從mask刪除邊框和添加背景

.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

我在此選擇器中刪除邊框樣式.effect .mask並將邊框樣式更改爲背景樣式。

.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"> <a href="#" class="info" title="Full Image">Full Image</a> 
 
    </div> 
 
</div>

希望它能幫助。