Здравствуйте, подскажите как мне сделать так чтобы при наведение на блок-div он затемнялся и появлялась кнопка подробнее с ссылкой,в html, css
Нужно чтобы при наведении на блок-div он затемнялся и появлялась надпись подробнее с ссылкой на страницу где собственно всё будет описано. Только не через тег title это не то. Я знаю про псевдокласс hover и атрибут opacity. Но я не знаю как сделать эту кнопку подробнее?Поскажите плиз!
Ответы (1 шт):
Автор решения: Armen
→ Ссылка
...для дальнейших вопросах чтобы добавить пример кода
если захочешь добавить выполняемый код то второй с права от отметки
... 
потом после добавление кода отмечаешь все начиная со второй строки и нажимаешь ctrl+k чтобы все выровнять...
вот решение
.elem{
transition: background-color 1s ease;
width: 50px;
height: 50px;
border: 1px solid red;
}
.elem a{
transition: opacity 1s ease;
display: block;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
}
.elem:hover{
background-color: burlywood;
}
.elem:hover a{
visibility: visible;
opacity: 1;
}<div class="elem">
<a href="https://www.google.com">link</a>
</div>