Blog
Here is an HTML template with a demo for flip and click cards. I have used jQuery for the active state and worked on CSS to transform rotate the card. After rotation user can see the associated text can click on it to go to the associated URL. This works on all platforms including Ipads and Mobiles.
DEMO
Open demo in a full window – https://demos.webdevpuneet.com/jquery/flip-cards/index.html
HTML
<div class="flipnclick">
<a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
<img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
<div class="flipnclick__content">
Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
</div>
</div>CSS
body {
font-size: 14px;
}
.flipnclick {
width: 200px;
height: 255px;
border: 1px solid;
text-align: left;
position: relative;
border-radius: 10px;
overflow: hidden;
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transform: rotateY(0);
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
display: inline-block;
margin: 10px;
}
.flipnclick.active {
transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
.flipnclick__image {
position: absolute;
background: #fff;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
}
.flipnclick__content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
overflow-y: hidden;
background: #a51382;
color: #fff;
font-size: 20px;
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-webkit-perspective: 1000px;
text-decoration: none;
opacity: 0;
}
.flipnclick__arrow {
position: absolute;
right: 15px;
bottom: 15px;
}
.flipnclick__link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.flipnclick.active .flipnclick__content {
opacity: 1;
}
.flipnclick.active .flipnclick__image {
opacity: 0;
}
.flipnclick.active .flipnclick__link {
z-index: 111;
}jQuery
$('.flipnclick').click(function() {
$this = $(this);
if ($this.hasClass('active')) {
} else {
$('.flipnclick').removeClass('active');
$(this).addClass('active');
}
})Complete Source
<!doctype html>
<html lang="en">
<head>
<title>Flip and Click Cards using jQuery and CSS</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="keywords" content="" />
<meta name="description" content="Flip and Click Cards using jQuery and CSS" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<style>
body {
font-size: 14px;
}
.flipnclick {
width: 200px;
height: 255px;
border: 1px solid;
text-align: left;
position: relative;
border-radius: 10px;
overflow: hidden;
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transform: rotateY(0);
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
display: inline-block;
margin: 10px;
}
.flipnclick.active {
transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
.flipnclick__image {
position: absolute;
background: #fff;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
}
.flipnclick__content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
overflow-y: hidden;
background: #a51382;
color: #fff;
font-size: 20px;
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-webkit-perspective: 1000px;
text-decoration: none;
opacity: 0;
}
.flipnclick__arrow {
position: absolute;
right: 15px;
bottom: 15px;
}
.flipnclick__link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.flipnclick.active .flipnclick__content {
opacity: 1;
}
.flipnclick.active .flipnclick__image {
opacity: 0;
}
.flipnclick.active .flipnclick__link {
z-index: 111;
}
</style>
</head>
<body>
<div class="flipnclick">
<a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
<img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
<div class="flipnclick__content">
Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
</div>
</div>
<div class="flipnclick">
<a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
<img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
<div class="flipnclick__content">
Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
</div>
</div>
<div class="flipnclick">
<a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
<img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
<div class="flipnclick__content">
Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
</div>
</div>
<div class="flipnclick">
<a target="_blank" href="http://webdevpuneet.com/" class="flipnclick__link"></a>
<img class="flipnclick__image" src="https://i0.wp.com/webdevpuneet.com/wp-content/uploads/2019/10/puneet1-1.png">
<div class="flipnclick__content">
Hello, I'm Puneet. I've Been Building Websites For Over 9 Years!
I love to work creatively and help my clients from across the globe, express their creative ideas, through their websites.
</div>
</div>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
$('.flipnclick').click(function() {
$this = $(this);
if ($this.hasClass('active')) {
} else {
$('.flipnclick').removeClass('active');
$(this).addClass('active');
}
})
</script>
</body>
</html>
You must be logged in to post a comment.