Hello developers, today in this blog you'll learn how to create a Card Design with Figcaption and Flip effect using HTML, CSS & JavaScript.
The card design can be a convenient means of displaying contents that include various information pictures or icons of the particular information that what has to be displayed or conveyed, title and description.
In this blog (Card Design with Figcaption and Flip effect) on the webpage, there is an image at the center of the webpage and there is a title. When you click on the title, it expands and shows you a description. There is also a button, named as read back. When you click on the read back button, the card will flip and shows you the information at the back of the card. In the back card, there is a button named back to front, where you can go back to the front page.
The source code of this Card Design with Figcaption and Flip effect is given below, and you can copy the source code of this program. You can use this code of Card Design with Figcaption and Flip effect with your creativity and can take this card to the subsequent level.
Card Design with Figcaption and Flip effect [Source Code]
To make this website (Card Design with Figcaption and Flip effect), you need to create three files: an HTML file, a CSS file & JavaScript. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body{
font-family: 'Helvetica', sans-serif;
display: flex;
height: 100%;
color: #000;
padding: 50px;
line-height: 1.6;
background: linear-gradient(to right, #deaa88, #fdb064);
}
figure{
margin: auto;
width: 700px;
position: relative;
}
.front, .back{
border: 1px solid #12192c;
border-radius: 5px;
}
.front{
transform: perspective( 2000px ) rotateY( 0deg );
transition: all .3s linear;
position: relative;
backface-visibility: hidden;
}
.back{
transform: perspective( 2000px ) rotateY( 180deg );
transition: all .3s linear;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
background: #fff0e6;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
backface-visibility: hidden;
}
.back__header{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
background: #ffdccc;
border-bottom: 1px solid #ff844d;
border-radius: 5px 5px 0 0;
padding: 0 40px;
}
.back__header button{
margin: auto 0;
}
.back p{
padding: 0 40px 40px 40px;
}
figure .image{
overflow: hidden;
background: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
figure img{
display: block;
width: 100%;
border-radius: 2px;
}
figcaption{
margin-bottom: 30px;
padding: 10px 20px;
border-radius: 5px 5px 0 0;
background: #fff0e6;
position: absolute;
bottom: 0;
right: 5%;
left: 40%;
transition: 0.2s all linear 0s;
}
figure h4{
margin: 5px 0;
display: flex;
justify-content: space-between;
}
figure h4 b{
align-self: start;
color: #444;
margin-left: 20px;
line-height: 20px;
}
figure .details{
height: 0;
overflow: hidden;
transition: 0.2s all linear 0s;
}
figure p{
margin: 0;
color: #777;
}
figure button{
cursor: pointer;
text-transform: uppercase;
border: none;
border-radius: 2px;
color: #fff;
padding: .5rem 1rem;
}
figure button i{
margin-left: 1rem;
}
#show-back{
display: block;
margin-top: 10px;
background: #000;
}
#show-front{
margin-top: auto;
background: #444;
}
@media screen and (min-width: 426px) and (max-width: 769px){
body{
font-size: 14px;
}
}
@media screen and (max-width: 425px){
body{
font-size: 12px;
}
figcaption{
cursor: pointer;
padding: 10px 20px;
border-radius: 5px 5px 0 0;
background: #fff;
position: absolute;
bottom: 0;
right: 20px;
left: 20px;
}
}
.credit{
text-align: center;
color: #000;
margin-top: 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color: #000;
font-weight: bold;
}
var badge = document.querySelector('.badge');
var caption = document.querySelector('figcaption');
var details = document.querySelector('.details');
var detailsContent = document.querySelector('.details__content');
var lowResImage = document.querySelector('.img');
var highResImage = document.createElement('img');
var front = document.querySelector('.front');
var back = document.querySelector('.back');
var showFrontBtn = document.querySelector('#show-front');
var showBackBtn = document.querySelector('#show-back');
caption.addEventListener('mouseover', function () {
var contentHeight = detailsContent.offsetHeight;
details.style.height = contentHeight + 10 + 'px';
badge.innerHTML = '';
});
caption.addEventListener('mouseout', function () {
details.style.height = 0;
badge.innerHTML = '';
});
highResImage.onload = function () {
lowResImage.src = highResImage.src;
}
setTimeout(function () {
highResImage.src = 'https://cdn.pixabay.com/photo/2021/07/12/19/43/swans-6421355__340.jpg';
}, 1000);
showBackBtn.addEventListener('click', function () {
back.style.transform = "perspective( 2000px ) rotateY( 0deg )";
front.style.transform = "perspective( 2000px ) rotateY( -180deg )";
});
showFrontBtn.addEventListener('click', function () {
front.style.transform = "perspective( 2000px ) rotateY( 0deg )";
back.style.transform = "perspective( 2000px ) rotateY( 180deg )";
});
Thank you for reading our blog. If you face any problem in creating this Card Design with Figcaption and Flip effect using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team