如何让 2 个悬停效果同时工作？

Question

所以我对悬停效果有点困惑，我试图让 2 个悬停效果同时起作用。我的目标是通过文字叠加实现磨砂玻璃效果。这是我的代码笔 https://codepen.io/kyannashanice/pen/mdRjmry

样式表：

.product {
  width: 400px;
  height: 400px;
}

.container {
  position: relative;
  width: 400px;
  height: 400px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  z-index: 99;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Blur Hover Effect */

img {
  position: absolute;
     filter: none;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
border-radius:5px;
border:1px solid black;
}

img:hover {
    opacity: 0.8;
   filter: -webkit-filter: blur(4px); 
    filter: blur(4px);
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

HTML:

<p>Both hover effects applied but one working over the other</p>
<div class="container">
  
<img src="https://www.mydomaine.com/thmb/aA3TdLIHHviKBrIBVLExBBnQjSA=/1790x1790/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/string-of-pearls-product2-2f5350b5894642ea8942a2726ee20f13.jpg" class="product">
  
  
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
  
</div>

<br>

<br>

<br>

<p>No text overlay</p>
<img src="https://www.mydomaine.com/thmb/aA3TdLIHHviKBrIBVLExBBnQjSA=/1790x1790/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/string-of-pearls-product2-2f5350b5894642ea8942a2726ee20f13.jpg" class="product">

两个叠加层都可以单独使用，但当它们重叠时，只会显示文本叠加层。如果有人知道如何使两种效果同时消失，我将不胜感激。

谢谢！

Answer 1

问题是悬停设置为img。首先，您获得覆盖照片的 .overlay class，因此照片中的悬停不起作用。

尝试将悬停添加到容器：（改为 img:hover）

.container:hover img{
    opacity: 0.8;
   filter: -webkit-filter: blur(4px); 
    filter: blur(4px);
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

标记 HTML

带文字的照片

<div class="container">
  
  <img src="" class="product">
  
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
  
</div>

没有文字的照片

<div class="container">
  
  <img src="" class="product">
  
</div>

如何让 2 个悬停效果同时工作？

How to have 2 hover effects work at the same time?

html

css

hover