Question

我试图创建一个图像悬停效果，但我有两个问题中的一个：

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

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

- 启动不透明图像和普通彩色文本，然后在悬停时，图像变为正常，文本保持不变，并且当光标在图像上方时，所有图像都保持正常。

这是我的代码：

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

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

Answer 1

如果您只想更改图像的不透明度，请更改规则以更改/转换图像上的不透明度 - 而不是父div。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

创建图像悬停效果，其中文字不受不透明度

2 个答案: