This Bootstrap 5 code snippet helps you to create card animation on hover. Each card displays an image, a title, and a button that becomes visible and animated when the card is hovered. The animations include button opacity changes, position adjustments, and image blur effects. This functionality enhances the visual appeal of a webpage and makes interactive elements more engaging for users.
It is particularly useful for portfolios, product displays, or any section needing stylish and responsive hover effects.
How to Create Bootstrap 5 Card Animation on Hover
1. First, create a new HTML file and include the Bootstrap 5 CSS CDN link in the <head> section of your HTML file.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
2. Next, we will create the HTML structure for our cards. Add the following code inside the <body> tag:
<section> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-lg-4"> <div class="card my-5"> <img src="https://nsm09.casimages.com/img/2021/06/25//21062504053125998217474490.jpg" class="card-img-top" alt="..."> <h5 class="card-title text-light"> Alpha </h5> <a href="#" class="btn btn-light">Go Somewhere</a> </div> </div> <div class="col-12 col-lg-4"> <div class="card my-5"> <img src="https://nsm09.casimages.com/img/2021/07/16//21071603222325998217495266.jpg" class="card-img-top" alt="..."> <h5 class="card-title text-light"> Bravo </h5> <a href="#" class="btn btn-light">Go Somewhere</a> </div> </div> <div class="col-12 col-lg-4"> <div class="card my-5"> <img src="https://nsm09.casimages.com/img/2021/07/16//21071603222425998217495268.jpg" alt="..."> <h5 class="card-title text-light"> Charlie </h5> <a href="#" class="btn btn-light">Go Somewhere</a> </div> </div> </div> </div> </section>
3. Now, we need to style our cards and add the hover animations. Create a CSS file named style.css and add the following styles:
@import url('https://fonts.googleapis.com/css2?family=Leckerli+One&display=swap');
*{
box-sizing: border-box;
}
html {
height: 100%;
}
body{
font-size:16px;
background-color: rgba(0,0,0,1);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(7,0,113,1) 25%, rgba(82,75,219,1) 50%, rgba(7,3,114,1) 79%, rgba(1,0,11,1) 100%) !important;
background-size: 100% 600%;
min-height: 100%;
-webkit-animation: animation-bg 40s infinite;
animation: animation-bg 40s infinite;
animation-direction: alternate;
}
@-webkit-keyframes animation-bg {
0% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
@keyframes animation-bg {
0% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
section
{
margin-top:5rem;
}
.card
{
margin-top:5%;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border-radius:15px;
border:none;
background-color:white;
}
.card .btn
{
opacity:0;
position:absolute;
left:50%;
top: 110%;
transform: translate(-50%, -50%);
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0);
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border-radius: 10px;
padding:0.8rem 1.7rem;
border:none;
font-weight:bold;
}
.card:hover .btn
{
opacity:1;
top: 100%;
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}
.card:hover
{
box-shadow: 0 4px 18px 0 rgba(0,0,0,0.7);
}
h5
{
position: absolute;
left:50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 2.7rem;
opacity:0.3;
text-shadow: 1px 1px 2px black;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
font-family: 'Leckerli One', cursive;
}
.card:hover h5
{
opacity:1;
font-size: 3rem;
}
.card .btn:hover
{
color:white;
border:none;
}
div.col-12:nth-child(1) > .card:nth-child(1) > .btn:nth-child(3):hover
{
background-color:Navy;
}
div.col-12:nth-child(2) > .card:nth-child(1) > .btn:nth-child(3):hover
{
background-color:SeaGreen;
}
div.col-12:nth-child(3) > .card:nth-child(1) > .btn:nth-child(3):hover
{
background-color: PaleVioletRed;
}
.card img
{
filter:blur(0px);
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border-radius:15px;
}
.card:hover img
{
filter:blur(3px);
}
Save your HTML and CSS files, then open your HTML file in a web browser. You should see three cards with images, titles, and buttons. When you hover over each card, the button will slide into view, the title will become more visible, and the image will blur slightly. This creates an engaging visual effect for users.
That’s all! hopefully, you have successfully created animated cards for your Bootstrap 5 projects. If you have any questions or suggestions, feel free to comment below.
