Accordion card
How do I make an accordion card?
What is a accordion card? How do you make a accordion card? This script and codes were developed by Mikita on 19 January 2023, Thursday.
Accordion card - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page"> <div class="page__part page__part_1"></div> <div class="page__part page__part_2"></div> <div class="page__part page__part_3"></div> <div class="page__part page__part_4"></div>
</div> <script src="js/index.js"></script>
</body>
</html>
Accordion card - Script Codes CSS Codes
body { background: #444;
}
.page { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 0; line-height: 0; -webkit-perspective: 1000px; perspective: 1000px; width: 300px; height: 150px; display: inline-block;
}
.page:hover .page__part { opacity: 1; -webkit-transform: skew(0) rotate(0) scale(1) translate(0, 0); transform: skew(0) rotate(0) scale(1) translate(0, 0);
}
.page__part { -webkit-transition: all .2s linear; transition: all .2s linear; position: absolute; top: 0; width: 25%; height: 100%; background: #ccc; font-size: 14px; line-height: 1.3; background: url(https://unsplash.it/1920/810) 0 0 no-repeat; background-size: 500% 100%;
}
.page__part_1 { left: 0; -webkit-transform: skew(-15deg) rotate(-15deg) scale(.9); transform: skew(-15deg) rotate(-15deg) scale(.9);
}
.page__part_2 { left: 25%; opacity: .5; -webkit-transform: skew(15deg) rotate(15deg) scale(.9) translate(-7%, 1%); transform: skew(15deg) rotate(15deg) scale(.9) translate(-7%, 1%); background-position: 25% 0;
}
.page__part_3 { left: 50%; -webkit-transform: skew(-15deg) rotate(-15deg) scale(.9) translate(-15%, -2%); transform: skew(-15deg) rotate(-15deg) scale(.9) translate(-15%, -2%); background-position: 50% 0;
}
.page__part_4 { left: 75%; -webkit-transform: skew(15deg) rotate(15deg) scale(.9) translate(-22%, 2%); transform: skew(15deg) rotate(15deg) scale(.9) translate(-22%, 2%); background-position: 75% 0; opacity: .5;
}
Accordion card - Script Codes JS Codes
(function() {
}).call(this);
![Accordion card - Script Codes](http://shots.codepen.io/MikitaLisavets/pen/OMNJPN-512.jpg)
Developer | Mikita |
Username | MikitaLisavets |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 2,839 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Spin menu | 5,186 Kb |
Loader | 3,321 Kb |
Rollers | 4,089 Kb |
Buttons | 3,081 Kb |
Jquery.scrollbar | 3,920 Kb |
Water Tracker | 6,055 Kb |
Share Dropdown | 4,546 Kb |
Snap scroll | 2,732 Kb |
Simple pure CSS3 donut chart | 2,607 Kb |
Cards Menu | 4,611 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Modular Flip Card | Bbodine1 | 4,009 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
Weather App 2 | MightyJoeW | 2,877 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Guidepopup | Wooljs | 3,747 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!