Card Bootstrap
HTML
<div class="row">
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
FRENTE
<img src="https://i.imgur.com/wuwUIr9.jpg">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://i.imgur.com/wuwUIr9.jpg">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://i.imgur.com/wuwUIr9.jpg">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://i.imgur.com/wuwUIr9.jpg">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body{
padding-top:50px;
background: #555;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: center;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
width: 270px;
height: 178px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
background-color: #fff;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 270px;
z-index: 1;
}
.flip .card .img {
position: relative;
width: 270px;
height: 178px;
z-index: 1;
border: 2px solid #000;
}
.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner{margin:0px !important;}
JAVASCRIPT
$('.flip').click(function(){
$(this).find('.card').toggleClass('flipped');
});
