Верстка карточки пользователя

154

23 июля 2019, 08:50

Всем доброго вечере! Подскажите пожалуйста как сверстать этот элемент слайдера(фото прикрепила). Ситуация следующая, при наведение мишки на блок картинки, она должна стать темнее и в низу должны появится кнопки соц сетей. Затемнить блок с картинкой при наведении я могу, а вот как сделать так, чтобы одновременно появились соц сети, этого я не умею) В CSS же нету никаких условий типа И, ИЛИ.

Answer 1

.c-card { 
  width: 200px; 
} 
.c-card__img-wrapper { 
  position: relative; 
} 
.c-card__img-wrapper::after { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-color: black; 
  content: ""; 
  opacity: 0; 
} 
.c-card__social { 
  display: none; 
  position: absolute; 
  bottom: 15px; 
  left: 50%; 
  transform: translateX(-50%); 
  color: white; 
  z-index: 1; 
} 
 
.c-card:hover .c-card__img-wrapper::after { 
  opacity: .7; 
} 
.c-card:hover .c-card__social { 
  display: block; 
}

<div class="c-card"> 
  <div class="c-card__img-wrapper"> 
    <img class="c-card__img" src="https://via.placeholder.com/200" alt=""> 
    <div class="c-card__social">Social</div> 
  </div> 
  <p>Name Surname</p> 
</div>