I want to create a card similar to sample card but my card is not proper. I have provided photos and code of my card and also what I want it to look like.
My card at the moment:
No hover | Hover |
---|---|
What I want it to look like:
No hover | Hover |
---|---|
Below is the HTML and CSS code files of my card. the issue I am facing is the text appearing after hovering is not in proper box. Also if you want you can make it better.
*{
margin: 0px;
padding: 0px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
body{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
background: whitesmoke;
}
.card{
height: 500px;
margin: 50px;
box-shadow: 5px 5px 20px black;
overflow: hidden;
border-radius: 10px;
}
img{
height: 500px;
width: 350px;
border-radius: 10px;
transition: .5s;
}
.intro{
height: 200px;
width: 350px;
padding: 6px;
box-sizing: border-box;
position: relative;
/* background: rgb(27,27,27,.5); */
color: white;
bottom: 99px;
transition: .5s;
}
h1{
margin: 20px;
font-size: 40px;
}
p{
font-size: 20px;
margin: 20px;
visibility: hidden;
opacity: 0;
}
.card:hover{
cursor: pointer;
}
.card:hover .intro{
height: 220px;
bottom: 240px;
/* background: black; */
}
.card:hover p{
opacity: 1;
visibility: visible;
}
.card:hover img{
transform: scale(1.1) rotate(-3deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="sty.css">
</head>
<body>
<div class="container">
<div class="card">
<img src="puppy.jpeg" alt="">
<div class="intro">
<h1>helloo ji</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat est quisquam quo omnis dolores, ipsa, blanditiis assumenda eius tempore temporibus ipsum earum deserunt, ut facilis optio! Eveniet ad unde fugiat!</p>
</div>
</div>
</div>
</body>
</html>
2
Answers
Change the bottom size in
.card:hover .intro
to a larger value. E.g.:bottom: 300px;
You’re very close to the solution, however there are a few small issues with your approach:
the text doesn’t appear in the card on hover, which is probably because you’re using pixel heights which can quickly get out of hand.
there isn’t room to change the text if you choose to update your website’s contents – that’s due to these measurements too.
If we take another look at how we do the measurements and animations for the hover effect, we can remove pixel measurements for the
height
, and we can remove how thebottom
property affects where the text is.We can also use the
transform
property to move the text up 100% of that element’s height – without having to guess abottom
position.Here is the updated code, with comments so you can see what I’ve done:
To fix the issue you raised in comments about the heading not being there, you should first add a class to your heading element, and then make it have a negative transform. You might need to play around with the way transitions work to make sure the hover effect is what you want.