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

Question

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






AlphaBetaGamma


READ MORE

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 ?

user_14004917 · Answer

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

    
      
        
          
          
          AlphaBetaGamma
          
          
            READ MORE

user_6644114 · Answer

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/

The box-shadow code seems to be working.
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

user_13776120 · Answer

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

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

}








  
  
  
    
          AlphaBetaGamma
    
    
            READ MORE

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

3 Answers