悬停时覆盖透明图像

Question

我有一个<div>与background-image。当这个悬停时，我想另一个图像放置在顶部部分透明，所以原始图像可以在下面看到。

我当前构思涉及添加:hover状态和改变上述图像display状态visible必要z-index值一起。

有人可以给我一个jsfiddle.net实现的例子吗？

Answer 1

刮起了一个简单的例子给你。点击“运行代码片段”即可看到它的实际运行情况。

.image-holder { 
 
    background: url('http://i.imgur.com/5ln9Vmi.jpg'); 
 
    height: 500px; 
 
    width: 500px; 
 
    position: relative; 
 
} 
 

 
.image-holder::before { 
 
    content: ''; 
 
    background: url('http://i.imgur.com/khYHDfJ.jpg'); 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
} 
 

 
.image-holder:hover::before { 
 
    opacity: .5; /* amount of opacity to blend the two images */ 
 
}

<div class="image-holder"> 
 
</div>

Answer 2

为什么不使用opacity？

不透明度CSS属性指定元素的透明度，即元素背后的背景重叠程度。

该值适用于整个元素，包括其内容 ，即使该值未由子元素继承。因此，即使元素及其子元素具有不同的相对于彼此的不透明度，元素及其包含的子元素也具有与元素背景相对的相对不透明度 。

.myTransparentImage{ 
    opacity: 0; 
} 

.myTransparentImage:hover{ 
    opacity: 0.6; /* it's in pourcentage */ 
} 

这种方式，透明的形象，悬停，将出现在60％opacity所以你仍然可以看到下面的一个。所以它一直在其他图像的顶部，但只有一次出现。

这里是小提琴的例子：https://jsfiddle.net/5ob6n7nq/

Answer 3

如果我理解正确：https://jsfiddle.net/3jabz7d3/

<div class="block1"> 
    <div class="block2"></div> 
</div> 


.block1 { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: url(http://writm.com/wp-content/uploads/2016/08/Cat-hd-wallpapers-1080x675.jpg) no-repeat center center; 
    background-size: cover; 
} 

.block2 { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: url(http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg) no-repeat center center; 
    background-size: cover; 
    display: none; 
    opacity: 0.3; 
} 

.block1:hover .block2{ 
    display: block; 
}