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

我对soemthing感到困惑很可能很简单，但我无法弄清楚。当我将鼠标悬停在图像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索引：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的位置上工作过......

来源

2017-03-13 user838531

几件事情要注意这里：

不要把你的风格<body>标签内
尝试风格，你想看到在图片whitout使用的层:hover状态，所以它必须是.container .hover-second-image-over-first-image
使用:hover行动的所有.container元素

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

来源

2017-03-13 19:29:51 DaniP

感谢你的帮助，但我的问题仍然存在。这个CSS代码可以在Typo3网站上运行：.container .hover-second-image-over-first-image：hover { width：100％; 身高：100％; background-image：url（image_02.jpg）; background-position：左上角; background-repeat：no-repeat; background-size：100％; position：absolute; 不透明度：0; -webkit-transition：全部0.4s缓解; -moz-transition：全部0.4s易于使用; -o-transition：全部0.4s缓解; 过渡：全部0.4s缓解; }我不知道，它是如何/为什么它:) :) – user838531

你的代码确实有效，但你删除了图像，你确实改变了代码。我的问题是，你在我的文章中看到的CSS代码是从网站获取的原始代码，我只是不明白它是如何工作的:) – user838531

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

回答

相关问题