主页 / 问题 / 928115
Accepted
Даша Новикова
Asked:2020-01-04 01:20:27 +0000 UTC2020-01-04 01:20:27 +0000 UTC

用户卡布局

  • 772

各位晚上好！请告诉我如何制作这个滑块元素（附照片）。情况如下，当您将熊悬停在图像块上时，它应该会变暗，并且社交网络按钮应该出现在底部。我可以在悬停时用图片使块变暗，但我不能这样做以使社交网络同时出现）在 CSS 中，没有 AND、OR 之类的条件。在此处输入图像描述

html

1 个回答

  1. Best Answer

    .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>

    • 2

相关问题