在文本不受不透明度影响的情况下创建图像悬停效果

Question

我正在尝试创建图像悬停效果，但遇到两个 2 个问题中的第一个：

文本和背景不透明（我只希望背景不透明。我希望文本保持正常。）
图像会正确悬停和过渡，但如果我将鼠标悬停在文本上，整个图像会返回到图像的原始版本。

我尝试了几种不同的方法，但我无法同时解决这两个问题。所以我想要完成的是：

-从不透明的图像和正常颜色的文本开始，然后悬停时，图像变为正常，文本保持不变，当光标悬停在图像上时，所有图像保持正常。

这是我的代码：

.outer {
   opacity: 0.25;
      -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
       -ms-transition: all .5s ease;
         transition: all .5s ease;
    }
    .outer:hover{
      opacity: 1.0;
   cursor: pointer;
    }

    h2.image-headings {
   position: absolute;
   top: 40%;
   width: 100%;
   font-size: 60px;
   color: #fff;
    }

<div class="outer">
    <img src="http://wasatchhospitality.com/wp-content/uploads/2017/02/wasatch-elements.jpg">
    <h2 class="image-headings">Management Team</h2>
    </div>

此代码显示的文本和图像从不透明开始。谢谢

Answer 1

如果您只想更改图像的不透明度，请将您的规则更改为图像上的 change/transition 不透明度 - 而不是父级 div。

.outer img {
  opacity: 0.25;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}

.outer {
  cursor: pointer;
}

.outer:hover img {
  opacity: 1.0;
}

h2.image-headings {
  position: absolute;
  top: 40%;
  width: 100%;
  font-size: 60px;
  color: #fff;
}

<div class="outer">
  <img src="http://wasatchhospitality.com/wp-content/uploads/2017/02/wasatch-elements.jpg">
  <h2 class="image-headings">Management Team</h2>
</div>

Answer 2

我建议您使用 JQuery 插件来执行此操作，因为它们的动画非常好并且易于

在文本不受不透明度影响的情况下创建图像悬停效果

Creating image hover effect where the text isn't affected by the opacity

html

css

image

hover

opacity