Skip to content

Instantly share code, notes, and snippets.

@ahimsauzi

ahimsauzi/Bootstrap 4 Flip Card

Last active October 4, 2019 14:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ahimsauzi/0e8a378d3e7365fc3d69fa335c749698 to your computer and use it in GitHub Desktop.
Save ahimsauzi/0e8a378d3e7365fc3d69fa335c749698 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Bootstrap 4 Flip Card
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" src="https://picsum.photos/id/102/265/245" alt="alt="front image cap" style="height: 245px; width: 100%; display: block;" data-holder-rendered="true">
<div class="carousel-caption">
<h1>ALOE</h1>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Aloe</h4>
<h6 class="card-subtitle text-muted">Just the facts</h6>
</div>
<div class="card-block">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed arcu non odio euismod.</p>
<a href="#" class="card-link">Read More</a>
<a href="#" class="card-link">Another Link</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
</html>
Raw
index.js
/**
* index.js
* - All our useful JS goes here, awesome!
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
document.querySelector(".card-flip").classList.toggle("flip");
/*
* Holder.js for demo image
* Just for demo purpose
*/
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
});
Raw
index.processed.css
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
padding-top: 100px;
}
.card-flip {
perspective: 1000px;
}
.card-flip:hover .flip,
.card-flip.hover .flip {
transform: rotateY(180deg);
}
.carousel-caption {
position: absolute;
right: 15%;
top: 65px;
left: 15%;
z-index: 10;
padding-top: 0px;
padding-bottom: 50px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.card-flip,
.front,
.back {
width: 100%;
height: 245px;
}
.flip {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment