12 Bootstrap Card Hover Effects (With Source Code!)

July 3, 2020, 11:18 a.m.

Bootstrap · 9 min read

12 Bootstrap Card Hover Effects (With Source Code!)

Adding hover selectors to HTML elements is a good way to engage and prompt the user with very minimal code. Adding a shadow or transition when a user hovers over a card or button can let them know that element is clickable.

But there are endless ways to create hovers so how do you decide which one to add to your site?

We decided to create a list of some CodePen user-submitted Bootstrap card hovers to help you get started. 

Links are provided to the actual code along with the author's profile page.

Enjoy!

 

Using Bootstrap CDN

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </head>
  <body>

    ...

    <!-- Optional Javascript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Before you can add CSS to a Bootstrap card, you need to connect your project to the Bootstrap CSS framework. To use Bootstrap components, you can add the Bootstrap CDNs to your project's <head> element and <body> elements. The CSS link goes in the <head> while the optional JavaScript is placed right before the closing <body> tags.

With those few lines of code, you are ready to use Bootstrap and more importantly Bootstrap cards.

 

Using Bootstrap card components

<div class="container">
  	<div class="card">
  		<div class="card-body">
		    <h5 class="card-title">Card title</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> 
</div>

A basic Bootstrap card is comprised of the card, card-body, card-title, and card-text class attribute values. These are custom to the Bootstrap CSS framework and get their style for the stylesheet CDN we linked in the <head> element. Many other class attributes can be added to a Bootstrap card, so be sure to check out the documentation on card components

 

Attaching a custom stylesheet

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!--Custom CSS-->
    <link rel="stylesheet" href="{% static 'css/stylesheet.css'%}" type="text/css">
  </head>
  <body>

    ...

    <!-- Optional Javascript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

If you wish to attach a stylesheet to hold all of the declarations, follow the tutorial Manage Django Static Files and link the custom stylesheet in the <head> element. Or you can always use a <style> HTML element and add the CSS declarations directly to the HTML document.

 

Before we jump into the CSS declarations, we just want to inform you that all of the code provided below is from CodePen and in no way our own.

 


 

Hover Bootstrap Cards

Created by Corey

HTML and CSS are the only things used in this code snippet besides Bootstrap. A box-shadow is declared for the card class attribute value then a hover selector specifies that the card will scale up and a darker box-shadow will appear when the user hovers over the card.

 

Code Highlights

.card{
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  padding: 14px 80px 18px 36px;
  cursor: pointer;
}

.card:hover{
     transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

To recreate the hover, just add these two main CSS declarations to your project. 

 

View on CodePen

 


 

Bootstrap Cards - NO JavaScript

Created by General Assistance

As the name states, this code snippet also only uses HTML and CSS. This card has an opacity change on the hover.

 

Code Highlights

a, a:hover {
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

To recreate the opacity change on the hover, just add these two main CSS declarations to your project. 

 

View on CodePen

 


 

Bootstrap Cards and Derivates

Created by Blue Wind

This code snippet actually provides card groups and an accordion. On hover, most of the cards get a box shadow on the left, right, and bottom of the card while the card title changes colors. 

 

Code Highlights

/* card group aka PRIMARY */
.card-group .card-primary:hover {
  box-shadow: 0 40px 60px -20px rgba(12, 5, 62, 0.15);
  z-index: 100;
}
.card-group .card-primary:hover .card-title{
  color: #4e22d0;
}

To recreate the hover, add a box shadow on the card hover. In this case, because there are multiple cards with different CSS on hover, the card's class attribute is the custom class card-primary.

 

View on CodePen

 


 

Bootstrap Cards - Effect

Created by Donhovann Zamora

The CSS on these Bootstrap card hovers involves a box-shadow, an ease-in, opacity change, and a scale. While it may seem more complicated than the last code snippets, it only seems this way because this developer decided to call the cards by custom ids and class attribute values while taking into account different browser compatibility.

 

Code Highlights

#cards_landscape_wrap-2 .card-flyer:hover .image-box img{
  opacity: 0.7;
  -webkit-transform:scale(1.15);
  -moz-transform:scale(1.15);
  -ms-transform:scale(1.15);
  -o-transform:scale(1.15);
  transform:scale(1.15);
}

#cards_landscape_wrap-2 .card-flyer:hover{
  background: #fff;
  box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
  /*box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);*/
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin-top: 50px;
}

The first CSS declaration creates the image effect on hover while the second adds the shadow around the entire card. 

 

View on CodePen


 

Responsive hover cards bootstrap 3

Created by francisco

This code snippet uses Bootstrap class attribute values but also has a custom class attribute value called container_foto that takes the place of the Bootstrap card class attribute value. On hover, the card image scales up and changes opacity, the cursor turns to a pointer, the article text is translated upward and a view more button displays at the bottom of the card. 

 

Code Highlights

.container_foto:hover img {
	opacity: 0.1;
	transform: scale(1.5);
}

.container_foto:hover article {
	transform: translate(2px, -69px);
	-webkit-transform: translate(2px, -69px);
	-moz-transform: translate(2px, -69px);
	-o-transform: translate(2px, -69px);
	-ms-transform: translate(2px, -69px);
}

.container_foto:hover .ver_mas {
	transform: translate(0px, 0px);
	-webkit-transform: translate(0px, 0px);
	-moz-transform: translate(0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	opacity: 1;
}

The main highlight of the code snippet is the hover selector translating the article HTML element upward to display a view more icon.

 

View on CodePen

 


 

Expand Cards | Bootstrap

Created by elcanziba

HTML, CSS, and JavaScript are used in this next code snippet. The CSS declarations are handling the shadow on hover while the JS creates the movement of the card-flap reveal.

 

Code Highlights

.dashboard-cards .card:hover {
      box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5);
  transition: all 0.3s ease;
}

.dashboard-cards .task-list li:hover {
  background: #ecf0f1;
  transition: all .2s ease;
}

.dashboard-cards .card-actions .btn:hover {
	color: #f36525;
}

We will just be covering the hovers but refer to the entire code snippet below to see the JS. The first hover selector creates the shadow, the second hover selector creates the gray color change when you hover over the tasks listed within the card dropdown, and the last hover selector has the "Close" button change to orange upon user hover. 

 

View on CodePen

 


 

Responsive Flip Cards Bootstrap 4

Created by Nicolas

This next code snippet also uses HTML, CSS, and JavaScript. On hover, the card rotates 180 degrees to show the back of the card. 

 

Code Highlights

.card-flip {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  height: auto;
  transition: all 0.5s ease-out;
  background: white;
  border: none;
}

.card-container:hover .card-flip {
  transform: rotateY(180deg);
}

To recreate the rotation on hover, you need to use transform: rotateY to rotate the card along its Y-axis. Then set the rotation to 180 to rotate the card to the back. You will also need to add a transform-style: preserve-3d so the animation looks three dimensional, a position declaration, and a transitional declaration that sets the speed of the effect.

Check out the rest of the code snippet to create the effect in its entirety. 

 

View on CodePen

 


 

Cards Bootstrap 4

Created by Teja Babu S

Only HTML and CSS are used for this card rotation, with no JavaScript needed. 

 

Code Highlights

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.frontside,
.backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

Similar to the last code snippet, you need to use transform: rotateY to rotate the card along its Y-axis. Then set the rotation to 180 to rotate the card to the back. You will also need to add a transform-style: preserve-3d to the class attribute not given the hover selector, so the animation looks three dimensional and a transitional declaration that sets the speed of the effect.

Although it may look like a lot of code, try and break it down with comments and remember that this developer is accounting for browser compatibility.

 

View on CodePen

 


 

Cards bootstrap

Created by Natlia Chusovitina

Besides providing a nice gradient background, this code snippet also has a hover selector that scales the card 1.1 times its original size.

 

Code Highlights

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

The only hover selector used is on the card to scale. This code snippet is a great example of how the smallest effects can create a strong impact. 

 

View on CodePen

 


 

Product Card

Created by Deni Kurniawan

If you are looking for a less traditional card hover, this code snippet has only the image move on hover rather than the entire card. You can create this effect with very minimal CSS. 

 

Code Highlights

.wsk-cp-product:hover .wsk-cp-img{
  top:-40px;
}
.wsk-cp-product:hover .wsk-cp-img img{
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

To create this effect, you need to first declare the parent element hover selector than add the image class attribute value and a CSS declaration stating the top of the image is now -40px. That way when the parent element or card is hovered over, it causes the child element or image to move upward. 

 

View on CodePen

 


 

Flat vector cards (Bootstrap)

Created by Dan Sealey

The last card snippet, although simple in comparison to others, create a strong impact with a color change on hover. 

 

Code Highlights

.card-icon:hover {
	  background-color: #2a6496;
}

This CSS effect is created with an SVG image and a declaration stating on user hover, change the background color of the SVG. This effect can also be done with text cards on hover. 

 

View on CodePen

 


 

Those were just some Bootstrap card hovers to give you some inspiration but numerous other CodePen code snippets can provide helpful insight in creating CSS effects on your website. 

If you are interested in customizing more Bootstrap components, check out 10 Custom Bootstrap Navbar Examples.

 


0
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments