CODEWITHSUNDEEP
htmlcss
HelloWorld1
HelloWorld1

Reputation: 14100

Display content when you have the mouse for hover

Goal:
Display the picture and the card Title only as default. When you have the mouse over the class card the text message "aaa" should appear and the card title and the picture will go up. You can say that it is the same height but the picture size will be less height.

Problem:
I don't know how to solve it

Info:
Please take into account responsive design.

Jsbin:
https://jsbin.com/yelocuwime/edit?html,css,output

Thank you!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

    <div class="cards">
      <div class="card">
        <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
        <div class="cardTitle">ONE</div>
        <div>aaa<br /> aaaa</div>
      </div>
      <div class="card">
        <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
        <div class="cardTitle">TWO</div>
        <div>aaa<br /> aaaa</div>
      </div>
      <div class="card">
        <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
        <div class="cardTitle">THREE</div>
        <div>aaa<br /> aaaa</div>
      </div>
    </div>  

</body>
</html>

.cards {
  margin: 0 auto;
  display: grid;
  grid-gap: 5px;
}
  
.card {
  width: 100%;
  min-height: 100px;
  background-color: #e6e6e6;
  text-align: center;
  border:1px solid white;
  transition: border 1s;
}

.card:hover {
  border:1px solid black;
}

.cardTitle {
  width: 100%;
  margin-top: -4px;
  color: white;
  background-color: grey;
  font-size:xx-large;
}

.responsive {
  width: 300px;
}  
  
/* 2 column */
@media (min-width: 700px) and (max-width: 899px) {
  div.cards { 
    grid-template-columns: repeat(2, 1fr); 
  }
}
    
/* 3 columns */
@media (min-width: 900px) {
  div.cards { 
    grid-template-columns: repeat(3, 1fr); 
  }
}

Upvotes: 1

Views: 71

Answers (1)

Junky
Junky

Reputation: 1026

.cards {
  margin: 0 auto;
  display: grid;
  grid-gap: 5px;
}
  
.card {
  width: 100%;
  min-height: 100px;
  background-color: #e6e6e6;
  text-align: center;
  border:1px solid white;
  transition: border 1s;
  position: relative;
}

.card:hover {
  border:1px solid black;
}

.card .wrapper {
  bottom: 0;
  position: absolute;
  transition: all .3s ease;
  width: 100%;
}

.card:hover .wrapper {
  bottom: 50%; 
  transform: translateY(-50%)
}

.cardTitle {
  width: 100%;
  margin-top: -4px;
  color: white;
  background-color: grey;
  font-size:xx-large;
}

.cardText {
  background-color: #fff;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.card:hover .cardText {
  height: 100%;;
  opacity: 1;
  visibility: visible;
  }

.responsive {
  width: 300px;
}  
  
/* 2 column */
@media (min-width: 700px) and (max-width: 899px) {
  div.cards { 
    grid-template-columns: repeat(2, 1fr); 
  }
}
    
/* 3 columns */
@media (min-width: 900px) {
  div.cards { 
    grid-template-columns: repeat(3, 1fr); 
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

    <div class="cards">
      <div class="card">
        <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
        <div class="wrapper">
          <div class="cardTitle">ONE</div>
          <div class="cardText">aaa<br /> aaaa</div>
        </div>
      </div>
    </div>  

</body>
</html>

You could add a wrapper around your card content:

      <div class="card">
        <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE" class="responsive" alt="" />
        <div class="wrapper">
          <div class="cardTitle">ONE</div>
          <div>aaa<br /> aaaa</div>
        </div>
      </div>

And then this CSS will cause the content to move up on hover

.card .wrapper {
  position: relative;
  transition: all .3s ease;
  top: 0;
}

.card:hover .wrapper {
 top: -100px; 
}

EDIT: I added a new class around <div>aaa<br /> aaaa</div> called cardText and then added additional style to hide and display when hovering.

This is pretty basic CSS stuff. I hope it helps.

Upvotes: 1

Related Questions