<style>
/* Задаём фон карточки, внутренние отступы и радиус скругления */
.visibl {
padding: 24px;
background-color: #d5d5d5;
border-radius: 10px;
}
/* Добавим к карточке тень при наведении */
.visibl:hover {
box-shadow: 0 0 15px #0000002e;
}
/* Стили для кнопки */
.visibl a {
background-color: #fff;
padding: 6px 30px;
color: #000 !important;
border-radius: 10px;
}
/* Стили для кнопки при наведении */
.visibl a:hover {
background-color: #000;
color: #fff !important;
border-radius: 10px;
}
/* Скрываем нужный текст, кнопку и пустые строки */
.visibl br,
.visibl span,
.visibl a {
position: absolute !important;
opacity: 0;
top: 0;
left: 0;
}
/* Покажем нужный текст, кнопку и пустые строки при наведении */
.visibl:hover br,
.visibl:hover span,
.visibl:hover a {
position: relative !important;
opacity: 1;
transition: 1.2s all ease;
}
</style>