Html - Card animation elements not properly aligned

Ashish
September 18, 2023
256 views
0 votes
2 Answers

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>

Answers

Change the bottom size in .card:hover .intro to a larger value. E.g.: bottom: 300px;

* {
  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: 300px;
  /* background: black; */
}

.card:hover p {
  opacity: 1;
  visibility: visible;
}

.card:hover img {
  transform: scale(1.1) rotate(-3deg);
}

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

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 the bottom 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 a bottom position.

Here is the updated code, with comments so you can see what I’ve done:

*{
    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 {
    /* Auto height is what we're looking for, so get rid of the following line: */
    /* height: 200px; */
    width: 350px;
    padding: 6px;
    box-sizing: border-box;
    position: relative;
    /* background: rgb(27,27,27,.5); */
    color: white;
    /* Don't need this any more: */
    /* bottom: 99px; */
    transition: all .5s;
}
/* Separate element for the title - we position it so it can be
seen on the card, when it would otherwise overflow */
.title {
    transform: translateY(calc(-100% - 20px - 20px));
    transition: transform .5s;
}
/* Then don't do that on hover */
.card:hover .title {
    transform: translateY(0);
}
h1{
   /* changed margin to make it look nicer */
   margin: 20px;
   margin-bottom: 0;
   font-size: 40px; 
}
p{
    font-size: 20px;
    margin: 20px;
    visibility: hidden;
    opacity: 0;
}
.card:hover{
    cursor: pointer;
}
.card:hover .intro{
    /* height: 220px; */
    /* no `bottom` needed */
    transform: translateY(-100%); /* Move it up 100% of its height */
    /* 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="https://images.unsplash.com/photo-1557374800-8ba4ccd60e9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3716&q=80" alt="">
            <div class="intro">
                <h1 class="title">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>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <!-- more stuff can go here -->
            </div>
        </div>
    </div>
</body>
</html>

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.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Card animation elements not properly aligned

Answers