悬停时显示卡片中的内容

Question

我有一个卡片项目，如图所示，不透明度为 0.5：

当我悬停时，我想再次显示一些信息，就像图片中那样：

这是我的例子；

.card-img {
  width: 100%;
  border-radius: calc(0.3rem - 0px);
}

.card-img-top {
  width: 100%;
  border-radius: 32px;
  opacity: 0.5;
}

.card-img-top:hover {
  opacity: 1;
}

<div class="col-md-6">
  <div class="card">
    <a href="#">
      <img class="card-img-top img-raised" src="img/banner-1.png" alt="Open Project 1">
      <div class="banner-content">
        Description
      </div>
      <a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
    </a>
  </div>
</div>

所以我在这个例子中试图实现的是，当我悬停时我想显示描述（横幅内容）并且我想将不透明度设置为 1，我已经在这样做了。

Answer 1

当您将鼠标悬停在 img 和 display 内容上时，放置 相邻同级选择器。

+ 用于选择紧跟在 .card-img-top 元素之后的第一个 .banner-content 元素。
Find more info here about combinators

.card {
  position: relative;
}

.banner-content {
  position: absolute;
  top: 20px;
  left: 20px;
  display:none;
}

.card-img {
  width: 100%;
  border-radius: calc(0.3rem - 0px);
}

.card-img-top {
  width: 400px;
  height:200px;
  border-radius: 32px;
  opacity: 0.5;
}

.card-img-top:hover {
  opacity: 1;
}

.card-img-top:hover + .banner-content {
  display: block;
}

<div class="col-md-6">
  <div class="card">
    <a href="#">
      <img class="card-img-top img-raised" src="https://pixy.org/src/477/4774988.jpg" alt="Open Project 1">
      <div class="banner-content">
        I am a new coder.<br> Happy to meet : )

      </div><br>
      <a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
    </a>
  </div>
</div>

Answer 2

第 1 步： 我用 opacity: 0 制作了一个 .top-layout class 以使其默认隐藏。

第 2 步：使用 CSS 中的 .card:hover .top-layout 选择器设置卡片项目悬停时的样式。

.card {
  width: 100%;
  border-radius: calc(0.3rem - 0px);
}

.card:hover .top-layout {
  opacity: 0.5 !important;
}

.top-layout {
  opacity: 0;
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}

.card-img-top {
  width: 100%;
  border-radius: 32px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-md-6">
  <div class="card">
    <a href="#">
      <img class="card-img-top img-raised" src="https://image.freepik.com/free-vector/comic-colorful-frame-background_52683-71995.jpg" alt="Open Project 1">
      <div class="top-layout">
        <div class="banner-content">
          Description
        </div>
        <a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
      </div>
    </a>
  </div>
</div>

Answer 3

您可以使用 + select 或 select 相邻的兄弟姐妹。更多关于 mdn

.card{
  position:relative;
}
.card-img {
  width: 100%;
  max-width:150px;
  border-radius: calc(0.3rem - 0px);
  
}

.card-img-top {
  border-radius: 32px;
  opacity: 0.5;
  width:150px;
}

.card-img-top:hover {
  opacity: 1;
}

.banner-content{
  position:absolute;
  top:0;
  left:0;
  display:none;
}

.card-img-top:hover + .banner-content{display:block;}

<div class="col-md-6">
  <div class="card">
    <a href="#">
      <img class="card-img-top img-raised" src="https://via.placeholder.com/50" alt="Open Project 1">
      <div class="banner-content">
        Description
      </div>
      <a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
    </a>
  </div>
</div>

悬停时显示卡片中的内容

Display content in the card when hover

html

css

styles

hover