Как при ховере элемента и затемнении его с эффектом прозрачности сделать так, чтобы некоторые внутренние элементы (обе кнопки) были видны с исходной непрозрачностью?
button {
display: block;
background-color: blue;
color: #fff;
padding: 10px;
}
.on-hover {
display: none;
position: absolute;
top: 50%;
left: 10%;
}
.frame {
position: relative;
}
.frame:hover {
opacity: 0.3;
}
.frame:hover .on-hover {
display: block;
background-color: black;
}
<div class="frame">
<p>текст</p>
<img src="http://s00.yaplakal.com/pics/pics_original/9/3/8/462839.jpg" alt="веселый паровозик" width="200" height="200" />
<button>кнопка</button>
<button class="on-hover">выход</button>
</div>
opacity
должен срабатывать и на тексте, т.е. по всему блоку. я к тому, что какие-то элементы могут быть и после синей кнопки - тут упрощенный вариант