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

Question

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

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

但是，我似乎无法让它在那个 Typo3 网站的另一个 part/element 上运行，我什至无法让它在像这个这样的简单基本 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 位置的其他网站上工作...

Answer 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>

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

hover image over another image

css

hover

fading