将图像悬停在另一个图像上答案

【问题标题】：hover image over another image将图像悬停在另一个图像上
【发布时间】：2017-03-13 19:14:15
【问题描述】：

我对一些很可能很简单的事情感到困惑，但我想不通。当我将鼠标悬停在图像 1 上时，我希望图像 2 覆盖图像 1。因此，目标是将图像 1 与包含半透明颜色渐变的图像 2 重叠。我知道这可以通过纯 CSS 以某种方式实现，但我需要这种方式。

以下 CSS 代码取自另一个 Typo3 CMS 网站，并且可以正常工作。

但是，我似乎无法让它在该 Typo3 网站的另一部分/元素上运行，我什至无法让它在像这样的简单基本 HTML 页面上运行。

<!DOCTYPE html>
<html>
<body>

<style>

.container {
    height: 300px;
    width: 500px;
    position: relative;
    background-color: red;
}

img {
    position: relative;
    height: 100%;
    width: 100%;
}

.container .hover-second-image-over-first-image:hover {
  width:100%;
  height:100%;
  background-image:url(image_02.jpg);
  background-position:top left;
  background-repeat: no-repeat;
  background-size:100%;
  position:absolute;
  opacity:0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
</style>

<div class="container">
 <div class="hover-second-image-over-first-image"></div>
 <img src="image_01.jpg" />
</div>


</body>
</html>

编辑：

好的，所以“z-index:10;”确实为我修好了。这段代码在这里有效：

.container {
    height: 300px;
    width: 500px;
    position: relative;
    background-color: red;
}

img {
    position: relative;
    height: 100%;
    width: 100%;
}

.container .hover-second-image-over-first-image {
  width:100%;
  height:100%;
  background-image:url(image_02.jpg);
  background-position:top left;
  background-repeat: no-repeat;
  background-size:100%;
  position:absolute;
  z-index:10;
  opacity:0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.container:hover .hover-second-image-over-first-image {
  opacity:.3;
}

但我仍然想知道为什么代码之前在没有任何 z-index 位置的其他网站上工作...

【问题讨论】：

标签： css hover fading

【解决方案1】：

这里有几点需要注意：

不要把你的样式放在<body>标签内
尝试在不使用:hover 状态的情况下设置您想在图像上看到的图层的样式，因此它必须是.container .hover-second-image-over-first-image
对所有 .container 元素使用 :hover 操作

.container {
  height: 300px;
  width: 500px;
  position: relative;
  background-color: red;
}

img {
  position: relative;
  height: 100%;
  width: 100%;
}

.container .hover-second-image-over-first-image {
  width: 100%;
  height: 100%;
  background:blue;
  opacity:0;
  position: absolute;
  top:0;
  left:0;
  z-index:10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.container:hover .hover-second-image-over-first-image {
  opacity:.7;
}

<div class="container">
  <div class="hover-second-image-over-first-image"></div>
  <img src="http://placehold.it/200" />
</div>

【讨论】：

感谢您的帮助，但我的问题仍然存在。此 CSS 代码可在 Typo3 网站上使用： .container .hover-second-image-over-first-image:hover { width:100%;高度：100%；背景图片：url（image_02.jpg）；背景位置：左上角；背景重复：不重复；背景大小：100%；位置：绝对；不透明度：0； -webkit-transition：所有 0.4s 轻松； -moz-transition：所有0.4s缓和； -o-transition：所有 0.4s 缓和；过渡：所有0.4s缓和；我不知道它是如何/为什么起作用的:))
您的代码确实有效，但您删除了图像并更改了代码。我的问题是您在我的帖子中看到的 CSS 代码是从网站上获取的原始代码，我只是不明白它是如何工作的 :)