圖像的鏈接，並覆蓋懸停效果

Question

請容忍我，因爲我不是很熟悉HTML/CSS

我嘗試輸出，顏色疊加和鏈接的圖像。文字如下，因爲圖像將縮略圖大小，它不適合。

問題：我無法將鏈接置於疊加層上方，因爲我懸停，因此我添加了兩個標記爲「索引」的CSS部分，嘗試更改懸停時鏈接的索引，但現在疊加層走了:(

也許我不明白的z-index是如何工作的還是我錯的：懸停語法

<div class="port_container"> 
<a href="http://hup.o-zen.de" class="port_link"> 
<img src="http://google.com" alt="some text" class="port_image"> 
</a> 
<div class="port_overlay"> 
</div> 
</div> 
<p>text goes here</p> 

.port_container { 
position: relative; 
width: 50%; 
} 

.port_image { 
display: block; 
width: 100%; 
height: auto; 
} 

.port_overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 0; 
    transition: .5s ease; 
    background-color: #ff6600; 
    } 

/* added index*/ 
.port_link { 
    position: relative; 
    transition: z-index 0s; 
    z-index: 0; 
    } 
/*index on hover*/ 
.port_link:hover { 
transition: z-index 0.5s ease; 
z-index: 1; 
} 

.port_container:hover .port_overlay { 
opacity: 0.5; 
} 

，我讀了一個鏈接包裹整個DIV不完全支持，所以我不會走那條路線，並希望你能發現我的代碼中的錯誤。

謝謝

Answer 1

.port_overlay模糊了鏈接，加入pointer-events:none它將修復它。我重寫並改進了這一點，不需要這樣做，疊加層就是圖像的一部分。

把它叉在Codepen上。

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.container { 
 
    width: 100px; 
 
} 
 
.container a .image { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-size: cover; 
 
} 
 
.container a .image:before { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    background-color: #ff6600; 
 
    mix-blend-mode: multiply; 
 
    -webkit-transition: opacity .25s ease; 
 
    transition: opacity .25s ease; 
 
} 
 
.container a:hover .image:before { 
 
    opacity: 1; 
 
} 
 
.container .caption { 
 
    max-width: 100%; 
 
    padding: 4px 0; 
 
}

<div class="container"> 
 
    <a href="yoursite"> 
 
     <div class="image" style="background-image:url(http://placekitten.com/g/300/300)"></div> 
 
    </a> 
 
    <div class="caption">Text goes here.</div> 
 
</div>

不要忘記投票，如果這有助於或者是遙遠的話題，並標記爲正確的，工作原理與綠色的勾一個答案。