content logo

Bootstrap Cards:

Bootstrap Image Card with a Colorful Transparent Overlay

We are living in a world where advancement is inevitable. The web design industry started with simple lines and boxes and slowly made its way into the world of colourful new designs. With this improvement, web designer also needed to upgrade. due to this fact, new ideas are shaped every day and each designer creates new creative and unique styles for themselves. People are also aware of this and tend to go for the newer designs with more aesthetically pleasing elements. With that said, animating Bootstrap cards are one of the most useful tools in a website that many use nowadays. They are pretty flexible too so it means tons of different styles are possible. If you have the imagination, it is possible to create unique designs that will catch anyone’s attention.

The code below features such design. It is an overlaying colour card with a hovering card effect. The body is transparent with a hue of purple colour added to it. it also features an image in the background plus the basic title and description elements. Due to the hover effect, the Bootstrap image card zooms in upon being hovered overed by the mouse cursor. A button comes up from the bottom of the screen as well. This is a view button with an eye icon, meaning you can view the full page if you are interested to know more about the item featured in the card.

#

Bootstrap Image Card

#

Overlaying Color Card

#

Hovering Card Effect

#

Animating Bootstrap Card

<!-- This script got from frontendfreecode.com -->
<div class="container-fluid contenedor text-center">
    <h1 class="text-center">CARDS</h1>
    <div class=" container text-center">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 container_foto ">
            <div class="ver_mas text-center">
                <span class="lnr lnr-eye"></span>
            </div>
            <article class="text-left">
                <h2>Title 1 <br>Title 2</h2>
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing </h4>
            </article>
            <img src="https://frontendfreecode.com/img/mountain-01.jpg" alt="">
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 container_foto ">
            <div class="ver_mas text-center">
                <span class="lnr lnr-eye"></span>
            </div>
            <article class="text-left">
                <h2>Title 1 <br>Title 2</h2>
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing </h4>
            </article>
            <img src="https://frontendfreecode.com/img/mountain-01.jpg" alt="">
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
	font-family: 'Raleway', sans-serif;
	background-color: #8186a3;
}
.contenedor {
	height: 100%;
	padding: 0;
}
h1 {
	color: #FCFBFA;
}
.container_foto {
	background-color: rgba(57, 62, 93, 0.7);
	padding: 0;
	overflow: hidden;
	margin: 5px;
	float:left;
    width:48%;
}
@media screen and (max-width: 640px) {
.container_foto{
            width:100%;
}
}
.container_foto article {
	padding: 10%;
	position: absolute;
	bottom: 0;
	z-index: 1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.container_foto h2 {
	color: #fff;
	font-weight: 800;
	font-size: 25px;
	border-bottom: #fff solid 1px;
}

.container_foto h4 {
	font-weight: 300;
	color: #fff;
	font-size: 16px;
}
.container_foto img {
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0.4;
	-webkit-transition: all 4s ease;
	-moz-transition: all 4s ease;
	-o-transition: all 4s ease;
	-ms-transition: all 4s ease;
	transition: all 4s ease;
}
.ver_mas {
	background-color: #FEB66C;
	position: absolute;
	width: 100%;
	height: 70px;
	bottom: 0;
	z-index: 1;
	opacity: 0;
	transform: translate(0px, 70px);
	-webkit-transform: translate(0px, 70px);
	-moz-transform: translate(0px, 70px);
	-o-transform: translate(0px, 70px);
	-ms-transform: translate(0px, 70px);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.ver_mas span {
	font-size: 40px;
	color: #fff;
	position: relative;
	margin: 0 auto;
	width: 100%;
	top: 13px;
}
/*hovers*/
.container_foto:hover {
	cursor: pointer;
}
.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;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway:300,400,800'>
<link rel='stylesheet' href='https://cdn.linearicons.com/free/1.0.0/icon-font.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway:300,400,800'>
<link rel='stylesheet' href='https://cdn.linearicons.com/free/1.0.0/icon-font.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<style>
body {
	font-family: 'Raleway', sans-serif;
	background-color: #8186a3;
}
.contenedor {
	height: 100%;
	padding: 0;
}
h1 {
	color: #FCFBFA;
}
.container_foto {
	background-color: rgba(57, 62, 93, 0.7);
	padding: 0;
	overflow: hidden;
	margin: 5px;
	float:left;
    width:48%;
}
@media screen and (max-width: 640px) {
.container_foto{
            width:100%;
}
}
.container_foto article {
	padding: 10%;
	position: absolute;
	bottom: 0;
	z-index: 1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.container_foto h2 {
	color: #fff;
	font-weight: 800;
	font-size: 25px;
	border-bottom: #fff solid 1px;
}

.container_foto h4 {
	font-weight: 300;
	color: #fff;
	font-size: 16px;
}
.container_foto img {
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0.4;
	-webkit-transition: all 4s ease;
	-moz-transition: all 4s ease;
	-o-transition: all 4s ease;
	-ms-transition: all 4s ease;
	transition: all 4s ease;
}
.ver_mas {
	background-color: #FEB66C;
	position: absolute;
	width: 100%;
	height: 70px;
	bottom: 0;
	z-index: 1;
	opacity: 0;
	transform: translate(0px, 70px);
	-webkit-transform: translate(0px, 70px);
	-moz-transform: translate(0px, 70px);
	-o-transform: translate(0px, 70px);
	-ms-transform: translate(0px, 70px);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.ver_mas span {
	font-size: 40px;
	color: #fff;
	position: relative;
	margin: 0 auto;
	width: 100%;
	top: 13px;
}
/*hovers*/
.container_foto:hover {
	cursor: pointer;
}
.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;
}
</style>

</head>
<body>
<div class="container-fluid contenedor text-center">
    <h1 class="text-center">CARDS</h1>
    <div class=" container text-center">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 container_foto ">
            <div class="ver_mas text-center">
                <span class="lnr lnr-eye"></span>
            </div>
            <article class="text-left">
                <h2>Title 1 <br>Title 2</h2>
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing </h4>
            </article>
            <img src="https://frontendfreecode.com/img/mountain-01.jpg" alt="">
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 container_foto ">
            <div class="ver_mas text-center">
                <span class="lnr lnr-eye"></span>
            </div>
            <article class="text-left">
                <h2>Title 1 <br>Title 2</h2>
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing </h4>
            </article>
            <img src="https://frontendfreecode.com/img/mountain-01.jpg" alt="">
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview