This one is going be short and sweet. I won’t go too in depth but just explain what I did to create the card. Here’s a preview of what we’ll build.
To build this card, I created 1 div for the card. Within that div, are 2 other divs – 1 for the image and 1 for the description.
On the image div, I added the image I wanted and set both width and height to 100%. I made sure that the image I have has the same dimensions as the card (or at least the same proportion) to avoid distortion.
The description div has an title and description. It also has the same height and width. I set the property overflow to hidden because the description div goes beyond the div.
Now for the fun part. We need to position the description div to where we want it to be. So, I used transform to move it in position. Here’s the code I used.
.card-text {
transform: translateY(-80px);
}
I only want to move the div vertically so I used the translateY value. Since I need to move it up, the value is negative.
In order to move the div up when we hover on it, we just change the value of translateY to a higher negative number like so.
.card-text:hover {
transform: translateY(-350px);
}
This essentially accomplishes what we need. However, if you want a nicer effect where the card eases in when sliding up (instead of just jumping to position), we’ll change the transition using cubic-bezier values. Here’s the updated code.
.card-text {
transform: translateY(-80px);
transition: 1s;
transition-timing-function: cubic-bezier(.42,0,.58,1);
}
The cubic-bezier values are too complicated for me. So, I just go to a site to get the values. Here it is if you’re interested – cubic-bezier.com. They have a lot of transition effects. You can also make your own.
Here’s the codepen if you want to play around with it.
This one is going be short and sweet. I won’t go too in depth but just explain what I did to create the card. Here’s a preview of what we’ll build.
To build this card, I created 1 div for the card. Within that div, are 2 other divs – 1 for the image and 1 for the description.
On the image div, I added the image I wanted and set both width and height to 100%. I made sure that the image I have has the same dimensions as the card (or at least the same proportion) to avoid distortion.
The description div has an title and description. It also has the same height and width. I set the property
overflowtohiddenbecause the description div goes beyond the div.Now for the fun part. We need to position the description div to where we want it to be. So, I used
transformto move it in position. Here’s the code I used..card-text { transform: translateY(-80px); }I only want to move the div vertically so I used the
translateYvalue. Since I need to move it up, the value is negative.In order to move the div up when we hover on it, we just change the value of
translateYto a higher negative number like so..card-text:hover { transform: translateY(-350px); }This essentially accomplishes what we need. However, if you want a nicer effect where the card eases in when sliding up (instead of just jumping to position), we’ll change the transition using
cubic-beziervalues. Here’s the updated code..card-text { transform: translateY(-80px); transition: 1s; transition-timing-function: cubic-bezier(.42,0,.58,1); }The
cubic-beziervalues are too complicated for me. So, I just go to a site to get the values. Here it is if you’re interested – cubic-bezier.com. They have a lot of transition effects. You can also make your own.Here’s the codepen if you want to play around with it.