Fancy Card Animation

Developer
Simon Codrington
Size
2,419 Kb
Views
18,216
  1. Fancy Card Animation Previews
  2. Fancy Card Animation HTML Codes
  3. Fancy Card Animation CSS Codes

How do I make an fancy card animation?

An animation that activates when you hover over a card! . What is a fancy card animation? How do you make a fancy card animation? This script and codes were developed by Simon Codrington on 01 October 2022, Saturday.

Fancy Card Animation Previews
IQ Test

Fancy Card Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fancy Card Animation</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="fancy-cards"> <h1>Microinteraction on active</h1> <p>It triggers a subtle micro-interaction (scales and adjusts) when the user interacts with it.</p> <div class="fancy-card"> <div class="top"> <div class="caption"> <h3 class="title">Beautiful Summer</h3> <a href="" class="button">Find Out </a> </div> </div> <div class="middle"></div> <div class="bottom"></div> </div>
</div>
</body>
</html>

Fancy Card Animation - Script Codes CSS Codes

html{ font-family: 'open sans';
}
h1{ margin-top: 30px; margin-bottom: 15px;
}
.fancy-cards{ text-align: center; margin: 80px auto;
}
.fancy-cards .fancy-card{ display: inline-block; position: relative; top: 40px; left: 20px; box-sizing: border-box;
}
.fancy-card .top,
.fancy-card .middle,
.fancy-card .bottom{ position: relative; border-radius: 3px; overflow: hidden; width: 250px; height: 250px; transition: transform 300ms linear-out;
}
.fancy-card .top{ z-index: 3; transform: scale(1.0); transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1); background-image: url('https://static-1.gumroad.com/res/gumroad/assets/collections/food_and_cooking_thumb-34fb9ef316a7b01177529839891c3a03.jpg'); background-size: cover; background-position: center; box-shadow: 0px 1px 3px rgba(25,25,25,0.30);
}
.fancy-card .middle{ position: absolute; background: #aaa; top: 0px; z-index: 2; transform: rotate(0deg); transition: transform 250ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.fancy-card .bottom{ position: absolute; background: #ccc; top: 0px; z-index: 1; transform: rotate(0deg); transition: transform 250ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.fancy-card .caption{ overflow: hidden; background: rgba(255,255,255,0.75); padding: 15px 10px; position: absolute; bottom: 0px; left: 0px; width: 100%;
}
.fancy-card .caption .title{ color: #222; margin: 0px 0px 15px 0px; font-size: 1.4rem;
}
.fancy-card .caption .button{ display: inline-block; color: #333; text-decoration: none; border: solid 1px #555; padding: 7px 13px; background-color: transparent; transition: all 300ms ease-in;
}
/*hovering*/
.fancy-card:hover .top{ transform: scale(1.05);
}
.fancy-card:hover .middle{ transform: rotate(-7deg); box-shadow: 1px 1px 2px rgba(74, 74, 74, 0.35);
}
.fancy-card:hover .bottom{ transform: rotate(7deg); box-shadow: 1px 1px 2px rgba(113, 113, 113, 0.35);
}
.fancy-card:hover .button{ background: rgba(0,0,0,0.8); color: #fff; border: 0px;
}
Fancy Card Animation - Script Codes
Fancy Card Animation - Script Codes
Home Page Home
Developer Simon Codrington
Username simoncodrington
Uploaded October 01, 2022
Rating 3
Size 2,419 Kb
Views 18,216
Do you need developer help for Fancy Card Animation?

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!

Simon Codrington (simoncodrington) Script Codes
Name
Foundation 6 - Flex Grid
Foundation 6 Interchange
Animated border lines on hover
CSS Snap Scroll Points - Full Screen Scroller
Video API Interactive Showcase
Mobile Navigation Menus - Scale from 0 to 1 open
Test iFrame
Stripe Header Grid
CSS Pulsating Sonar
CSS animations on scroll - Multi step move
Create amazing blog posts 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!