在文本不受不透明度影响的地方创建图像悬停效果

Question

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

1. 文本和背景是不透明的（我只希望背景是不透明的。我希望文本保持正常。）

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

如果只想更改图像的不透明度，请更改规则以更改/转换图像的不透明度-而不是父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插件来执行此操作，因为它们动画效果非常好，并且易于实现