Unexpected behaviour on top attribute inside bootstrap card-group

Question

I have unexpected behavior inside a bootstrap card group.

Here is what I got:

As you can see, the third card image haven't the same top value than other ones. But all these cards have the same html and CSS code (no JS except bootstrap one in this page).

What I tried:

Delete this third card and I saw then the second card (the shoe image) have this top attribute problem. So it's not a problem of card but a problem of container which is a bootstrap card-deck.

Result:

Verify computed style (inspect -> style -> computed) of this image, which told me that the top: 50% and position: relative of the image are computed. The image don't move if i change the top value.

If you need, here is my code:

code

.card {
  border-radius: 9px !important;
  overflow: hidden;
}

.card img {
  margin: 0;
  position: relative;
  z-index: 2 !important;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  -ms-transition: top 0.8s ease;
  -webkit-transition: top 0.8s ease;
  -moz-transition: top 0.8s ease;
  -o-transition: top 0.8s ease;
  transition: top 0.8s ease;
}

.card:hover img {
  top: 15%;
  -ms-transition: top 0.8s ease;
  -webkit-transition: top 0.8s ease;
  -moz-transition: top 0.8s ease;
  -o-transition: top 0.8s ease;
  transition: top 0.8s ease;
}

.card img.rotated {
  transform: translate(-50%, -50%) rotate(20deg);
  -ms-transition: transform 0.8s ease, top 0.8s ease;
  -webkit-transition: transform 0.8s ease, top 0.8s ease;
  -moz-transition: transform 0.8s ease, top 0.8s ease;
  -o-transition: transform 0.8s ease, top 0.8s ease;
  transition: transform 0.8s ease, top 0.8s ease;
}

.card:hover img.rotated {
  transform: translate(-50%, -50%) rotate(0deg);
  -ms-transition: transform 0.8s ease, top 0.8s ease;
  -webkit-transition: transform 0.8s ease, top 0.8s ease;
  -moz-transition: transform 0.8s ease, top 0.8s ease;
  -o-transition: transform 0.8s ease, top 0.8s ease;
  transition: transform 0.8s ease, top 0.8s ease;
}


/** Dark-blue background **/
.card:before {
    background: #2b3b44;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(450px at 50% 50%);

    -ms-transition: 0.8s ease;
    -webkit-transition: 0.8s ease;
    -moz-transition: 0.8s ease;
    -o-transition: 0.8s ease;
    transition: 0.8s ease;
}

.card:hover:before {
    clip-path: circle(70px at 80% 10%);
}


/** Card text **/

.card-title {
  font-weight: 600;
}

.card p {
  font-size: 17px !important;
  margin-bottom: 10px !important;
}

.card:hover {
  color: unset !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Welcome!{% endblock %}</title>

  <!-- stylesheets -->
  <link rel="stylesheet" href="page.css" type="text/css">

  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>
  <!-- body -->
  <div class="col-md-10 mx-auto">
    <div class="row my-3">

      <!-- cards container -->
      <div class="card-deck">

        <!-- card -->
        <div class="card m-3">
          <img alt="Outdoor" height="128px" width="128px" src="https://pngimg.com/uploads/backpack/backpack_PNG6323.png" />
          <div class="card-body">
            <h5 class="card-title">Outdoor</h5>
            <p>first line</p>
          </div>
        </div>
        <!-- end card -->

        <!-- card -->
        <div class="card m-3">
          <img class="rotated" alt="Running" height="128px" width="128px" src="https://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png" />
          <div class="card-body">
            <p>first line</p>
            <p>second line</p>
          </div>
        </div>
        <!-- end card -->

        <!-- card -->
        <div class="card m-3">
          <img alt="Others sports" height="128px" width="128px" src="https://storage.needpix.com/rsynced_images/bicycle-159680_1280.png"
          />
          <div class="card-body">
            <p>first line</p>
            <p>second line</p>
            <p>third line</p>
          </div>
        </div>
        <!-- end card -->

        <!-- card -->
        <div class="card m-3">
          <img alt="Music" height="128px" width="128px" src="https://cdn.pixabay.com/photo/2020/01/29/17/47/battery-4803149_960_720.png" />
          <div class="card-body">
            <p>first line</p>
          </div>
        </div>
      </div>
      <!-- end card -->

    </div>
    <!-- end cards container -->
  </div>

  <!-- bootstrap -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <!-- javascript -->
</body>

</html>

Please tell me about any problem about this question.

Thanks for any idea about this !

EDIT: I discovered that everything work fine if the top property value is in "px", but it doesn't work if the top attribute have a value in "%". I veryfy parent and closure tags " to know if the image wasn't in a smaller parent than others but it's not the case ...

RE-EDIT: I found where the problem come but not the solution ... On my example, every cards have a different text. And then not the same content height. On my code, the bike card have the higher content height, and after delete it, the shoe card have the hier text content.

On the exemple I put here, the shoe card have the higher text-content (three lines) the shoe card have a different behaviour than others.

The card-deck layout give the same height to every cards, whatever their content. I'm pretty sure that it have a consequence on top property behavior.

It would be great if you could create a minimum reproducible example for this. Include the bare minimum HTML and CSS demonstrating your problem. — jaimish11
Hmm you think that put my code inside a <body> </body> tag isn't enough to reproduce it ? :/ — Hedwin Bonnavaud
Nope I mean your images here won't load because you've pasted code directly from whatever templating engine you're using. If you'd add placeholder images and only the least amount of HTML and CSS required, it would help debug the problem. — jaimish11
the code you posted does not reproduce the issue you describe, please check it — Erica T.

ChewySalmon ChewySalmon · Accepted Answer · 2020-07-31T14:26:09

If you're able to use flex then you could do the following to all of your cards:

<div class="card m-3 d-flex flex-column justify-content-center align-items-center">

    <img alt="Music" height="128px" width="128px" src="{{ asset("images/curriculum_vitae/hobbies/drum_set.png") }}"/>

    <div class="card-body">
        <h5 class="card-title">Musique</h5>
        <p>[...]</p>
    </div>

</div>

I've added 4 bootstrap helper classes to your card's class list. If you want to check whether the browsers you're targeting support flex, you can read here.

If you're unsure on how flex works you can read about it here.

Unexpected behaviour on top attribute inside bootstrap card-group

2 Answers