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

Question

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

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 插件来执行此操作，因为它们的动画效果非常好，而且很容易