Bootstrap card hover effect (zoom)

Bootstrap cards are widely used across responsive websites. You can add your own creative touch to it. But this post is not about creating a Bootstrap card. It’s about adding a hover effect to the Bootstrap card to enhance the user experience. You will learn how to add a simple yet cool zoom hover effect by using some CSS.

Final output:

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere


1. For this example, I am using Bootstrap video card.

<div class="card" style="width: 18rem;">
  <video controls="" src="https://codingyaar.com/wp-content/uploads/video-in-bootstrap-card.mp4"
    class="bs-card-video"></video>
  <div class="card-body">
    <h5 class="card-title">Bootstrap video card with controls</h5>
    <p class="card-text">
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

video {
  max-width: 100%;
}

Output:

Bootstrap video card with controls

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

2. To add to zoom hover effect, add transform scale property. Adjust scale value as you want.

.card:hover {
  transform: scale(1.1);
}

Output:

Bootstrap video card hover effect

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

3. Now, to have a smooth animation feel to the hover effect, let’s add a transition.

.card {
  transition: transform 0.2s ease;
}

Output:

Bootstrap video card hover effect

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

4. There you go! There’s your Bootstrap card zoom hover effect. To make it look more like the final output shown earlier, I have removed the border properties and added a box-shadow to the Bootstrap card.

.card {
  box-shadow: 0 4px 6px 0 rgba(22, 22, 26, 0.18);
  border-radius: 0;
  border: 0;
}

Output:

Bootstrap video card hover effect

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere


Final Output Code for Bootstrap card hover effect (zoom):

HTML

<div class="card" style="width: 18rem;">
  <video controls="" src="https://codingyaar.com/wp-content/uploads/video-in-bootstrap-card.mp4"
    class="bs-card-video"></video>
  <div class="card-body">
    <h5 class="card-title">Bootstrap video card  hover effect</h5>
    <p class="card-text">
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

CSS

  video {
    max-width: 100%;
  }
  .card {
    transition: transform 0.2s ease;
    box-shadow: 0 4px 6px 0 rgba(22, 22, 26, 0.18);
    border-radius: 0;
    border: 0;
    margin-bottom: 1.5em;
  }
  .card:hover {
    transform: scale(1.1);
  }

Recently added:

0 0 votes
Article Rating
Subscribe
Notify of
guest
3 Comments
Inline Feedbacks
View all comments
eddy
1 month ago

Hi used a youtube link to play the video via my site but
the videos aint working

Marek
Marek
7 months ago

Hello, How can I change the colour of button (background and colour) and have same function as you programm? Thanks and best regards Marek

3
0
Would love your thoughts, please comment.x
()
x