Bootstrap Cards:

Bootstrap Cards with Animated Image Backgrounds

As much as cards are useful in a website, there are a number of factors that should be taken into consideration when designing these handy tools. They offer great functions and various different styles but you should also make sure they are responsive. This means you need to put effort into making sure the design works correctly with different situations. For example, many tend to use their mobile phones for browsing. Phones are designed to be potable and have a much smaller screen than personal computers. Due to this fact, the different screen size may cause the card layout to be displayed incorrectly which defeats the whole aesthetic part of this feature.

In this post, we are sharing a Bootstrap image card. The code is designed to display a set of three cards in each line. The cards have the image on top which covers them plus the title and a short description about the item. The photos also feature a zoom effect. Each animating card may be replaced with animations and different styles. In addition to all of that, our image card effect code is designed professionally so it will work with all screen sizes, meaning the users would not have any problem regarding the Bootstrap card effect’s performance.

Bootstrap Image Card

Animating Card

Bootstrap card Effect

Image Card Effect

<!-- This script got from frontendfreecode.com -->
<div class="card-sliders ">
	<div class="container ">
		<div class="row align-items-center">
			<div class="col-md">
				<h3>Animated Bootstrap card</h3>
				<p class="lead">Using Bootstrap, Animate.css and jQuery</p>

				<div class="row mt-5">
					<div class="col-lg">
						<div class="card-decks">
							<div class="card-deck deck-active">
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-1.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
										
									</div>
								</div>
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-2.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
										
									</div>
								</div>
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-3.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
										
									</div>
								</div>
							</div>
							<div class="card-deck">
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-4.jpg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
									
									</div>
								</div>
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-5.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
										
									</div>
								</div>
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-6.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
  height: 100%;
  background: #2A2E45;
  color: #FFF;
  font-family: "montserrat";
}
body:before {
  content: "";
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(120deg, #343956, #343956 2px, transparent 2px, transparent 17.5vw);
  position: absolute;
}
.card-sliders {
  overflow: hidden;
  height: 95vh;
}
.card-sliders .container {
  height: 100% !important;
}
.card-sliders .container .row {
  height: 100%;
}
.card-sliders .card-decks .card-deck {
  display: none;
}
.card-sliders .card-decks .card-deck.deck-active {
  display: flex;
}
.card-sliders .card-decks .card-deck .card {
  font-size: 0.8rem;
  border: 0;
  border-radius: 1.25rem;
  box-shadow: 0 10px 20px 2px #181A28;
  color: #FFF;
  height: 300px;
  overflow: hidden;
}
.card-sliders .card-decks .card-deck .card h1, .card-sliders .card-decks .card-deck .card h2, .card-sliders .card-decks .card-deck .card h3, .card-sliders .card-decks .card-deck .card h4, .card-sliders .card-decks .card-deck .card h5, .card-sliders .card-decks .card-deck .card h6 {
  font-weight: bold;
}
.card-sliders .card-decks .card-deck .card a {
  color: #3BCEAC;
}
.card-sliders .card-decks .card-deck .card img {
  width: 200%;
  height: 200%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card-sliders .card-decks .card-deck .card .card-img-overlay {
  background: rgba(0, 0, 0, 0.5);
}
/* Custom animate.css delay */
.animated.delay-02s {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.animated.delay-04s {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

// The current slide
var slideOrder = 0;
// Pause between slides in miliseconds
var slidePause = 8000;
// The slides array
var slides = $(".card-decks .card-deck");

$(document).ready(function(){
	nextSlide(slideOrder)
})
function autoSlide(){
	autoSlideTimeout = setTimeout(function() {
		
		// Check if the slideOrder is not bigger
		// than the available amount of slides
		if(slides.length <= slideOrder){
			slideOrder = 0;
		}
		// Give us the next slide
		nextSlide(slideOrder);
		slideOrder++;
	}, slidePause);
}
function theDelay(index){
	// Maybe a bit dirty but we need to get the exact
	// pause between all the slides and we dont want a
	// point in the variable because of css
	var delay = (0.2 * index)
	var delayClass = parseInt(delay.toString().replace(".", ""));	
	return "0" + delayClass
}
function nextSlide(deck){
	//	Find the current active deck
	var currentDeck = slides.closest(".deck-active")
	var currentCards = currentDeck.find(".card");
	// Find the target deck we want to load in
	var nextDeck = slides.eq(deck);
	currentCards.each(function(index){
		var delay = theDelay(index);
		var card =$(this)
		// Remove all the animate.css classess
		card.removeClass().attr('class', 'card');
		card.addClass("animated flipOutY fast delay-" + delay + "s");
		setTimeout(function(){
			card.find(".card-img-overlay").fadeOut();
			card.find(".card-img").removeAttr('style');
		}, ((delay + 8) * 50))
	});
	var timeout = ((1 * (currentCards.length - 1)) * 1000)	
	setTimeout(function(){
		if(nextDeck.length){
			// Hide the current deck so the new deck
			// gets the right position then clean the
			// current deck
			currentDeck.removeClass("deck-active");
			currentDeck.find(".card").each(function(){
				$(this).removeClass().attr('class', 'card');
			})
			nextDeck.find(".card").each(function(index){
				var delay = theDelay(index);
				var card = $(this);
				setTimeout(function(){
					card.find(".card-img-overlay").stop().fadeIn();
					card.find(".card-img").animate({height: '110%', width: '110%'}, {duration:(slidePause / 2), easing: 'swing', queue: false });
			
				}, ((delay + 8) * 10))
				card.addClass("animated flipInY fast delay-" + delay + "s");			
			})
			nextDeck.addClass("deck-active");
			autoSlide();
		}else{
			// Try to reset the process
			console.error("Card flipper, did not find the target deck. Did you remove it?")
			slideOrder = 0;
			autoSlide();
		}		
	}, timeout)
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700,800,900&amp;display=swap'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700,800,900&amp;display=swap'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js'></script>
<style>
body {
  height: 100%;
  background: #2A2E45;
  color: #FFF;
  font-family: "montserrat";
}
body:before {
  content: "";
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(120deg, #343956, #343956 2px, transparent 2px, transparent 17.5vw);
  position: absolute;
}
.card-sliders {
  overflow: hidden;
  height: 95vh;
}
.card-sliders .container {
  height: 100% !important;
}
.card-sliders .container .row {
  height: 100%;
}
.card-sliders .card-decks .card-deck {
  display: none;
}
.card-sliders .card-decks .card-deck.deck-active {
  display: flex;
}
.card-sliders .card-decks .card-deck .card {
  font-size: 0.8rem;
  border: 0;
  border-radius: 1.25rem;
  box-shadow: 0 10px 20px 2px #181A28;
  color: #FFF;
  height: 300px;
  overflow: hidden;
}
.card-sliders .card-decks .card-deck .card h1, .card-sliders .card-decks .card-deck .card h2, .card-sliders .card-decks .card-deck .card h3, .card-sliders .card-decks .card-deck .card h4, .card-sliders .card-decks .card-deck .card h5, .card-sliders .card-decks .card-deck .card h6 {
  font-weight: bold;
}
.card-sliders .card-decks .card-deck .card a {
  color: #3BCEAC;
}
.card-sliders .card-decks .card-deck .card img {
  width: 200%;
  height: 200%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card-sliders .card-decks .card-deck .card .card-img-overlay {
  background: rgba(0, 0, 0, 0.5);
}
/* Custom animate.css delay */
.animated.delay-02s {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.animated.delay-04s {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
</style>

</head>
<body>
<div class="card-sliders ">
	<div class="container ">
		<div class="row align-items-center">
			<div class="col-md">
				<h3>Animated Bootstrap card</h3>
				<p class="lead">Using Bootstrap, Animate.css and jQuery</p>

				<div class="row mt-5">
					<div class="col-lg">
						<div class="card-decks">
							<div class="card-deck deck-active">
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-1.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
										
									</div>
								</div>
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-2.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
										
									</div>
								</div>
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-3.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
										
									</div>
								</div>
							</div>
							<div class="card-deck">
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-4.jpg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
									
									</div>
								</div>
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-5.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
										
									</div>
								</div>
								<div class="card">
									<img class="card-img" src="https://frontendfreecode.com/img/pexels-photo-6.jpeg" alt="Card image">
									<div class="card-img-overlay">
										<h5 class="card-title">An awesome title</h5>
										<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, maiores.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
// The current slide
var slideOrder = 0;
// Pause between slides in miliseconds
var slidePause = 8000;
// The slides array
var slides = $(".card-decks .card-deck");

$(document).ready(function(){
	nextSlide(slideOrder)
})
function autoSlide(){
	autoSlideTimeout = setTimeout(function() {
		
		// Check if the slideOrder is not bigger
		// than the available amount of slides
		if(slides.length <= slideOrder){
			slideOrder = 0;
		}
		// Give us the next slide
		nextSlide(slideOrder);
		slideOrder++;
	}, slidePause);
}
function theDelay(index){
	// Maybe a bit dirty but we need to get the exact
	// pause between all the slides and we dont want a
	// point in the variable because of css
	var delay = (0.2 * index)
	var delayClass = parseInt(delay.toString().replace(".", ""));	
	return "0" + delayClass
}
function nextSlide(deck){
	//	Find the current active deck
	var currentDeck = slides.closest(".deck-active")
	var currentCards = currentDeck.find(".card");
	// Find the target deck we want to load in
	var nextDeck = slides.eq(deck);
	currentCards.each(function(index){
		var delay = theDelay(index);
		var card =$(this)
		// Remove all the animate.css classess
		card.removeClass().attr('class', 'card');
		card.addClass("animated flipOutY fast delay-" + delay + "s");
		setTimeout(function(){
			card.find(".card-img-overlay").fadeOut();
			card.find(".card-img").removeAttr('style');
		}, ((delay + 8) * 50))
	});
	var timeout = ((1 * (currentCards.length - 1)) * 1000)	
	setTimeout(function(){
		if(nextDeck.length){
			// Hide the current deck so the new deck
			// gets the right position then clean the
			// current deck
			currentDeck.removeClass("deck-active");
			currentDeck.find(".card").each(function(){
				$(this).removeClass().attr('class', 'card');
			})
			nextDeck.find(".card").each(function(index){
				var delay = theDelay(index);
				var card = $(this);
				setTimeout(function(){
					card.find(".card-img-overlay").stop().fadeIn();
					card.find(".card-img").animate({height: '110%', width: '110%'}, {duration:(slidePause / 2), easing: 'swing', queue: false });
			
				}, ((delay + 8) * 10))
				card.addClass("animated flipInY fast delay-" + delay + "s");			
			})
			nextDeck.addClass("deck-active");
			autoSlide();
		}else{
			// Try to reset the process
			console.error("Card flipper, did not find the target deck. Did you remove it?")
			slideOrder = 0;
			autoSlide();
		}		
	}, timeout)
}
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS