Наложение прозрачного изображения на зависание

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?

Свойство 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; 
}