1

Как наложить прозрачный фон при ховере? Вот код где есть просто наложение фона:

https://jsfiddle.net/38yg95t3/

но когда хочу сделать тоже самое но при ховере(т.е затемнить картинку) и добавляю код

.img-overlay:hover{
    z-index:1;
    width: 100%;
    height: 100%;
    background: rgba(76, 68, 68, 0.3);
}
ничего не срабатывает,как это исправить?
1
  • Вариант @v-rotenberh подходит:) Но,возможно если надо просто затемнить - то можно сделать либо -webkit-filter: grayscale( 0 .. 1 ); либо если сзади фон темный сам по себе - -webkit-filter: opacity(0 ..1); Я просто не люблю плодить z-сущности, вот и работаю с тем, что имеется. Вот и получается, что можно обойтись без оверлея.
    – Crystal
    29 апр 2016 в 12:59

1 ответ 1

1
.img{
    background: url(http://images.vfl.ru/ii/1461929051/aa69e902/12489881.png) no-repeat;
    width: 550px;
    height: 550px;
}
.img:hover .img-overlay{
    width: 100%;
    height: 100%;
    background: rgba(76, 68, 68, 0.3);
}

Вот такой результат хотели? http://jsbin.com/noyomogiro/edit?html,css,output

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.