У меня есть макет, и в нем вот такие блоки с картинками, одни показаны без наведения на них, а один показан как должно быть при наведении на один из 6ти блоков
Я пробовал делать это при помощи hover нашел пример на codepen, но у меня почему-то не работает код прилагается
.card1 {
width: 314px;
height: 262px;
border: 1px solid white;
}
.img-background {
width: 314px;
height: 205px;
background: #FFFFFF;
border: 2px solid #000000;
box-sizing: border-box;
box-shadow: 0px 17px 24px #000000;
}
.card-img {
text-decoration: none;
font-family: Roboto, sans-serif;
font-size: 18px;
line-height: 21px;
color: #FFFFFF;
display: block;
width: 307px;
height: 200px;
margin-top: 3px;
}
.card-link {
display: block;
width: 100%;
line-height: 58px;
text-align: center;
}
.block_drop {
width: 100%;
height: 40%;
background-color: #5751C1;
transition-property: margin-top;
transition-duration: .5s;
}
.img-background:hover .block_drop {
margin-top: -40%;
}
<div class="card1">
<div class="img-background">
<a href="#" class="card-img"><img src="http://via.placeholder.com/314x205/33ff99/555555?text=Foto" alt="Shopping Tours"><span class="card-link">Shopping Tours</span></a>
<div class="block_drop"></div>
</div>
</div>
Подскажите пожалуйста, как это правильно сделать, причем чтоб ссылка ниже тоже меняла цвет, как на макете
.block_drop
?display
не подлежит анимации или трансформации