Stacked Cards Hover Effects

Developer
Kyle Brumm
Size
4,514 Kb
Views
4,048
  1. Stacked Cards Hover Effects Previews
  2. Stacked Cards Hover Effects HTML Codes
  3. Stacked Cards Hover Effects CSS Codes

How do I make an stacked cards hover effects?

Just playing around with more CSS transitions and hover effects.. What is a stacked cards hover effects? How do you make a stacked cards hover effects? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.

Stacked Cards Hover Effects Previews
IQ Test

Stacked Cards Hover Effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stacked Cards Hover Effects</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="container"> <h1>Stacked Cards<br>Hover Effects</h1> <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
</header>
<main> <div class="col"> <a href="#" class="card card-1 stacked--left"> <div class="content"> <code class="title">.stacked--left</code> </div> </a> </div> <div class="col"> <a href="#" class="card card-2 stacked--right"> <div class="content"> <code class="title">.stacked--right</code> </div> </a> </div> <div class="col"> <a href="#" class="card card-3 stacked--up"> <div class="content"> <code class="title">.stacked--up</code> </div> </a> </div> <div class="col"> <a href="#" class="card card-4 stacked--down"> <div class="content"> <code class="title">.stacked--down</code> </div> </a> </div> <div class="col"> <a href="#" class="card card-5 stacked--up-left"> <div class="content"> <code class="title">.stacked--up-left</code> </div> </a> </div> <div class="col"> <a href="#" class="card card-6 stacked--up-right"> <div class="content"> <code class="title">.stacked--up-right</code> </div> </a> </div> <div class="col"> <a href="#" class="card card-7 stacked--down-left"> <div class="content"> <code class="title">.stacked--down-left</code> </div> </a> </div> <div class="col"> <a href="#" class="card card-8 stacked--down-right"> <div class="content"> <code class="title">.stacked--down-right</code> </div> </a> </div> <div class="col"> <a href="#" class="card card-9 stacked--fan-left"> <div class="content"> <code class="title">.stacked--fan-left</code> </div> </a> </div> <div class="col"> <a href="#" class="card card-10 stacked--fan-right"> <div class="content"> <code class="title">.stacked--fan-right</code> </div> </a> </div>
</main>
</body>
</html>

Stacked Cards Hover Effects - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);
*,
*:before,
*:after { box-sizing: border-box;
}
html { font-family: 'Open Sans', Helvetica, arial, sans-serif; background-color: #eeeeee;
}
h1,
h4 { text-align: center; font-family: 'Raleway', 'Open Sans', sans-serif;
}
a { text-decoration: none; color: black;
}
.container { overflow: hidden; width: 100%; max-width: 800px; margin: 0 auto; padding: 2rem 1rem;
}
.col { padding: 1rem;
}
@media (min-width: 800px) { .col { width: 50%; float: left; } .col:nth-of-type(2n+1) { clear: left; }
}
.card { display: block; text-align: center; color: #eeeeee;
}
.card .content { padding: 4rem 1rem;
}
.card .title { font-size: 1.25rem; background-color: gray; border-radius: 3px; padding: 0.5rem;
}
.card-1 .content { background-color: #bdc9d3 !important; border-radius: 3px;
}
.card-1:before, .card-1:after { border-radius: 3px;
}
.card-1:before { background-color: #8fa3b5 !important;
}
.card-1 .title, .card-1:after { background-color: #627d95 !important;
}
.card-2 .content { background-color: #b7a09b !important; border-radius: 3px;
}
.card-2:before, .card-2:after { border-radius: 3px;
}
.card-2:before { background-color: #97766e !important;
}
.card-2 .title, .card-2:after { background-color: #6b534d !important;
}
.card-3 .content { background-color: #bbd8a0 !important; border-radius: 3px;
}
.card-3:before, .card-3:after { border-radius: 3px;
}
.card-3:before { background-color: #94c26a !important;
}
.card-3 .title, .card-3:after { background-color: #6e9f41 !important;
}
.card-4 .content { background-color: #aeb1cc !important; border-radius: 3px;
}
.card-4:before, .card-4:after { border-radius: 3px;
}
.card-4:before { background-color: #7f83af !important;
}
.card-4 .title, .card-4:after { background-color: #575b8b !important;
}
.card-5 .content { background-color: #dde7e3 !important; border-radius: 3px;
}
.card-5:before, .card-5:after { border-radius: 3px;
}
.card-5:before { background-color: #b0c8be !important;
}
.card-5 .title, .card-5:after { background-color: #83a999 !important;
}
.card-6 .content { background-color: #d4d09c !important; border-radius: 3px;
}
.card-6:before, .card-6:after { border-radius: 3px;
}
.card-6:before { background-color: #bdb667 !important;
}
.card-6 .title, .card-6:after { background-color: #968f41 !important;
}
.card-7 .content { background-color: #ceceac !important; border-radius: 3px;
}
.card-7:before, .card-7:after { border-radius: 3px;
}
.card-7:before { background-color: #b2b17c !important;
}
.card-7 .title, .card-7:after { background-color: #8e8d53 !important;
}
.card-8 .content { background-color: #aaabcd !important; border-radius: 3px;
}
.card-8:before, .card-8:after { border-radius: 3px;
}
.card-8:before { background-color: #7a7cb1 !important;
}
.card-8 .title, .card-8:after { background-color: #52548c !important;
}
.card-9 .content { background-color: #c4d5d8 !important; border-radius: 3px;
}
.card-9:before, .card-9:after { border-radius: 3px;
}
.card-9:before { background-color: #96b4b9 !important;
}
.card-9 .title, .card-9:after { background-color: #68939a !important;
}
.card-10 .content { background-color: #dfb6c7 !important; border-radius: 3px;
}
.card-10:before, .card-10:after { border-radius: 3px;
}
.card-10:before { background-color: #c7819e !important;
}
.card-10 .title, .card-10:after { background-color: #ae4d75 !important;
}
[class*='stacked--'] { position: relative; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; will-change: transform;
}
[class*='stacked--']:before, [class*='stacked--']:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: currentColor; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; will-change: transform;
}
[class*='stacked--']:before { z-index: -1;
}
[class*='stacked--']:after { z-index: -2;
}
.stacked--left:before, .stacked--left:after { -webkit-transform-origin: right center; transform-origin: right center;
}
.stacked--left:hover { -webkit-transform: translate(-5px, 0); transform: translate(-5px, 0);
}
.stacked--left:hover:before { -webkit-transform: translate(5px, 0) scale(0.95); transform: translate(5px, 0) scale(0.95);
}
.stacked--left:hover:after { -webkit-transform: translate(10px, 0) scale(0.9); transform: translate(10px, 0) scale(0.9);
}
.stacked--right:before, .stacked--right:after { -webkit-transform-origin: left center; transform-origin: left center;
}
.stacked--right:hover { -webkit-transform: translate(5px, 0); transform: translate(5px, 0);
}
.stacked--right:hover:before { -webkit-transform: translate(-5px, 0) scale(0.95); transform: translate(-5px, 0) scale(0.95);
}
.stacked--right:hover:after { -webkit-transform: translate(-10px, 0) scale(0.9); transform: translate(-10px, 0) scale(0.9);
}
.stacked--up:before, .stacked--up:after { -webkit-transform-origin: center bottom; transform-origin: center bottom;
}
.stacked--up:hover { -webkit-transform: translate(0, -5px); transform: translate(0, -5px);
}
.stacked--up:hover:before { -webkit-transform: translate(0, 5px) scale(0.95); transform: translate(0, 5px) scale(0.95);
}
.stacked--up:hover:after { -webkit-transform: translate(0, 10px) scale(0.9); transform: translate(0, 10px) scale(0.9);
}
.stacked--down:before, .stacked--down:after { -webkit-transform-origin: center top; transform-origin: center top;
}
.stacked--down:hover { -webkit-transform: translate(0, 5px); transform: translate(0, 5px);
}
.stacked--down:hover:before { -webkit-transform: translate(0, -5px) scale(0.95); transform: translate(0, -5px) scale(0.95);
}
.stacked--down:hover:after { -webkit-transform: translate(0, -10px) scale(0.9); transform: translate(0, -10px) scale(0.9);
}
.stacked--up-left:hover { -webkit-transform: translate(-5px, -5px); transform: translate(-5px, -5px);
}
.stacked--up-left:hover:before { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px);
}
.stacked--up-left:hover:after { -webkit-transform: translate(10px, 10px); transform: translate(10px, 10px);
}
.stacked--up-right:hover { -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px);
}
.stacked--up-right:hover:before { -webkit-transform: translate(-5px, 5px); transform: translate(-5px, 5px);
}
.stacked--up-right:hover:after { -webkit-transform: translate(-10px, 10px); transform: translate(-10px, 10px);
}
.stacked--down-left:hover { -webkit-transform: translate(-5px, 5px); transform: translate(-5px, 5px);
}
.stacked--down-left:hover:before { -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px);
}
.stacked--down-left:hover:after { -webkit-transform: translate(10px, -10px); transform: translate(10px, -10px);
}
.stacked--down-right:hover { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px);
}
.stacked--down-right:hover:before { -webkit-transform: translate(-5px, -5px); transform: translate(-5px, -5px);
}
.stacked--down-right:hover:after { -webkit-transform: translate(-10px, -10px); transform: translate(-10px, -10px);
}
.stacked--fan-left { -webkit-transform-origin: center bottom; transform-origin: center bottom;
}
.stacked--fan-left:before, .stacked--fan-left:after { -webkit-transform-origin: center bottom; transform-origin: center bottom;
}
.stacked--fan-left:hover { -webkit-transform: translate(-2.5px, 0) rotate(-2.5deg); transform: translate(-2.5px, 0) rotate(-2.5deg);
}
.stacked--fan-left:hover:before { -webkit-transform: translate(2.5px, 0) rotate(2.5deg); transform: translate(2.5px, 0) rotate(2.5deg);
}
.stacked--fan-left:hover:after { -webkit-transform: translate(5px, 0) rotate(5deg); transform: translate(5px, 0) rotate(5deg);
}
.stacked--fan-right { -webkit-transform-origin: center bottom; transform-origin: center bottom;
}
.stacked--fan-right:before, .stacked--fan-right:after { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
.stacked--fan-right:hover { -webkit-transform: translate(2.5px, 0) rotate(2.5deg); transform: translate(2.5px, 0) rotate(2.5deg);
}
.stacked--fan-right:hover:before { -webkit-transform: translate(-2.5px, 0) rotate(-2.5deg); transform: translate(-2.5px, 0) rotate(-2.5deg);
}
.stacked--fan-right:hover:after { -webkit-transform: translate(-5px, 0) rotate(-5deg); transform: translate(-5px, 0) rotate(-5deg);
}
Stacked Cards Hover Effects - Script Codes
Stacked Cards Hover Effects - Script Codes
Home Page Home
Developer Kyle Brumm
Username kjbrum
Uploaded January 07, 2023
Rating 4.5
Size 4,514 Kb
Views 4,048
Do you need developer help for Stacked Cards Hover Effects?

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!

Kyle Brumm (kjbrum) Script Codes
Name
Line Button Hover Effects
Stylish Brand Buttons
3D Orbiting Split Images
3D Parallax Boxes
Reactive Dot Grid - Canvas
Simple Accordion Concept
Vue.js Lazy Loading
Button Hover Effects
Wavy Loading Animations
CSS Only Dropdown
Create amazing SEO content with AI!

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!