Why my boostrap card hover the entire row?

Question

So i am trying to get a hover effect on the image that will show full description of it. But when i hover specific card, the other cards got hovered too and become the same height of the card that i hovered. Anyone knows whats probably the issue? Thank you in advance.

 <div class="container-md">
      <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
          <div class="card h-100">
            <img src="..." class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a wider card with supporting text below as a natural
                lead-in to additional content. This content is a little bit
                longer.
              </p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="..." class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This card has supporting text below as a natural lead-in to
                additional content.
              </p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="..." class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a wider card with supporting text below as a natural
                lead-in to additional content. This card has even longer content
                than the first to show that equal height action.
              </p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
        </div>
      </div>
    </div>

.card-body, .card-footer {
    display:none;
}

.card:hover {
    transform: scale(1.1);
    transition: 0.2s linear; 
}

.card:hover > .card-body, .card-footer {
    display:block;
}

I think it's the same answer as https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container — Schwarz Developing, Sep 12 '22 at 06:34

Mustafa_hd · Answer 1 · 2022-09-12T06:45:27.863

1

This is coming from .row class using flex in bootstrap.

Add this to your css. It should fix it:

.row {
    align-items: flex-start;
}

I would suggest adding a new class next to class row and applying the style so it doesn't affect the rest of your code.

See below example:

<div class="row row-cols-1 row-cols-md-3 g-4 row-flex-start">

And in your css instead of using .row use .row-flex-start.

edited Sep 12 '22 at 06:45

answered Sep 12 '22 at 06:35

Mustafa_hd

129
1
7

i have tried adding that and the height of each cards is not the same.. – sylvia_fe Sep 12 '22 at 10:36

Why my boostrap card hover the entire row?

1 Answers1