如何在悬停图像时正确设置图像上的文本标题

Question

我一直在尝试使用 angular 砌体。我一直在尝试做一些事情，例如将鼠标悬停在图像上时，图像会变暗，并且标题会在图像上更加暴露 (high-contrast) 以便能够正确阅读。然而，当我尝试将鼠标悬停在图像上时，标题，或者在我的例子中我称之为 header，在我的图像中消失（或者显然也受到图像变暗的影响）。

要完全理解我的意思，请看这个Sample Code on StackBlitz

我一直在尝试纯粹 css 来做这件事，这样在我的 angular 代码中就只会处理那些数据和屏幕转换（路由器链接）。我将样式留给 CSS 和其他图书馆（即 Angular Masonry）[=11=]

Answer 1

问题是 .feed-header 位于过滤器后面，因此您需要在 class 上设置 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;
}

Here is a StackBlitz demo

Answer 2

This stackblitz should work

我所做的只是将 header 放在图像之前，并将其作为 SASS 添加到您的 CSS 文件中：

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

（删除您之前使用的过滤器）

在HTML中，声明顺序很重要，z-index也是如此。

Answer 3

Try This Demo

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>

如何在悬停图像时正确设置图像上的文本标题

How to properly set text caption on image with image on hover

css

image

angular-masonry

angular