Display content in the card when hover-CodePudding

I have a card item as you see in the picture, opacity is 0.5:

When I hover I want to display some information on it like in the picture again:

So here is my example;

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

So what I am trying to achieve in this example, when I hover I want to display Description (banner-content) and I want to set the opacity to 1 which I am already doing.

CodePudding user response：

You can use selector wicth select the adjacent sibling. More on 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>

CodePudding user response：

Step 1: I make a .top-layout class with opacity: 0 to keep it hide by default.

Step 2: Use .card:hover .top-layout selector in CSS to set what style you want when the card item is hover.

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

CodePudding user response：

Put a Adjacent Sibling Selector when you hover on img and display the content .

is used here which selects the first .banner-content element that is placed immediately after .card-img-top element .
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>