CODEWITHSUNDEEP
htmlcss
Ityka Bandta
Ityka Bandta

Reputation: 109

How to add animation to a bootstrap 4 card on hover?

I have a card to which I would like to apply some basic animation like - zoom in effect and border color change on hover. I have tried several methods but nothing is working for me. Many similar questions have been asked before, and I tried a few but not getting satisfactory result.

Below is my code -

HTML

<div class="container">
<a class=" text-decoration-none " href="">
<div class="card">
<img class="icon" src=""/>
<div class="card-text">
AlphaBetaGamma
</div>
<div class="d-flex align-items-center justify-content-end">
<span class="read-more">READ MORE</span>
<i class="fas fa-arrow-circle-right"></i>
</div>
</div>
</a>
</div>

CSS-

.card .read-more:hover{
    font-size: 14px;
}

.card :hover{
    box-shadow: 8px 8px 8px blue;
}

The box shadow part is not working for some reason. I would also like the text on the card to grow a little when the card zooms and a blue shadow should add.

How can I achieve this ?

Upvotes: 5

Views: 23992

Answers (3)

Tyler Watts
Tyler Watts

Reputation: 193

For smooth transitional effects, add 'transition' to the element you'd like to target. Then in the hover selector, change the dimensions and it should happen with a smoother transition.

Same with color changes etc.. This is just one of the ways.

.card .read-more:hover{
    font-size: 14px;
}

.card:hover{
    box-shadow: 8px 8px 8px blue;
    transform:scale(1.2);
}

.card{
  height:200px;
  width:200px;
  border:1px solid black;
  transition:.3s;
  margin: 3rem;
}
    <div class="container">
      <a class=" text-decoration-none " href="">
        <div class="card m-5">
          <img class="icon" src=""/>
          <div class="card-text">
          AlphaBetaGamma
          </div>
          <div class="d-flex align-items-center justify-content-end">
            <span class="read-more">READ MORE</span>
            <i class="fas fa-arrow-circle-right"></i>
          </div>
        </div>
      </a>
   </div>

Upvotes: 10

Bhavesh Lohana
Bhavesh Lohana

Reputation: 376

I think this will get the desired result that you want.

.card:hover{
    box-shadow: 8px 8px 5px blue;    
    transform: scale(1.1);

}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>
<body>
<a href="..." class=" text-decoration-none">
<div class="card m-5" style="width: 18rem;">
  <!-- Added a sample image for visualisation-->
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRFd82s5apuZZXe_Hey_n73oahb7JEcw7u-qA&usqp=CAU" class="card-img-top" alt="...">
  <div class="card-body">
    <div class="card-text">
          AlphaBetaGamma
    </div>
    <div class="d-flex align-items-center justify-content-end">
            <span class="read-more">READ MORE</span>
            <i class="fas fa-arrow-circle-right"></i>
    </div>
  </div>
</div>
</a>
</body>

Upvotes: 5

jaimish11
jaimish11

Reputation: 564

The first thing to do is check whether you've imported Bootstrap 4 correctly and that you've imported all required files (CSS, JS, jQuery and Popper) It's best to follow the steps from their official docs - https://getbootstrap.com/

  1. The box-shadow code seems to be working.
  2. For a zoom effect you can use transform: scale(scale_value) So first you set a transition property to your read-more class and then on hover you scale it by adding a transform property.

Here's a codepen with your code demonstrating how you can do this:

https://codepen.io/jaimish11/pen/oNbrMZW

Upvotes: 4

Related Questions