如何正確設置圖像標題和懸停圖像

Question

我一直在嘗試使用角砌。 我一直在嘗試將鼠標懸停在圖像上時，圖像會變暗，並且標題在圖像上的曝光度更高（對比度高），以便能夠正確讀取。 但是，當我嘗試將鼠標懸停在圖像上時，圖像中的標題（或在我的情況下稱為標題）消失了（或顯然也受圖像變暗的影響）。

為了完全理解我的意思，請在StackBlitz上查看此示例代碼

我一直試圖在純CSS中執行此操作，以便在我的角度代碼中僅處理那些數據和屏幕轉換（routerlinks）。 我將樣式留給CSS和其他庫（即Angular Masonry）

Answer 1

問題是.feed-header位於過濾器后面，因此您需要在該類上設置z-index ：

.masonry-item
.feed-container
.feed-header {
  position: absolute;
  width: 100%;
  padding: 10px;
  align-items: center;
  display: flex;
  z-index: 9;
}

另外，如果要使文本形成對比，則可能需要將其懸停時設置為白色（以與深色濾鏡形成對比）。 您可以使用以下方法進行操作：

.masonry-item
.feed-container:hover
.feed-header {
  color: white;
}

這是一個StackBlitz演示

Answer 2

這個堆疊閃電應該起作用

我所做的就是將標題放在圖像之前 ，並將其作為SASS添加到您的CSS文件中：

ngxMasonryItem {
  .feed-text {
    color: white;
    z-index: 9999;
  }
  &:hover {
    img {
      filter:  blur(2px) brightness(50%)
    }
  }
}

（刪除以前使用的過濾器）

在HTML中，聲明順序很重要， z-index也是重要的。

Answer 3

試試這個演示

CSS文件

.box {  

    cursor: pointer;  
    height: 468px;  
    float: left;  
    margin: 5px;  
    position: relative;  
    overflow: hidden;  
    width: 468px;  

}  

 .box img {  
    position: absolute;  
    left: 0;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  


.box .caption {  
    font-family: Tahoma;
    font-size: .5em;
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    left: 0;  
    opacity: 0;  
    width: 450px;  
    height: 450px;  
    text-align: left;  
    padding: 15px;
}  



 .box:hover .fade-caption {  
    opacity: 1;  
} 

HTML文件

<div id="mainwrapper"> 

<!-- Image Caption 3 -->  
     <!-- Image Caption 3 -->  
    <div class="box">  
        <img id="image-3" src="https://www.w3schools.com/howto/img_avatar.png"/>  
        <span class="caption fade-caption">  
        <h3>Fade Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>

   <div class="box">  
        <img id="image-3" src="https://www.w3schools.com/howto/img_avatar.png"/>  
        <span class="caption fade-caption">  
        <h3>Fade Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>


</div>