Display content when you have the mouse for hover

Question

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!




  
  
  JS Bin



    
      
        
        ONE
        aaa
 aaaa
      
      
        
        TWO
        aaa
 aaaa
      
      
        
        THREE
        aaa
 aaaa

.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); 
  }
}

user_1984257 · Answer

.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); 
  }
}

You could add a wrapper around your card content:

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

aaa
 aaaa

called cardText and then added additional style to hide and display when hovering.

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

Display content when you have the mouse for hover

1 Answers