Animated card

Developer
Michael Chernin
Size
1,729 Kb
Views
6,072
  1. Animated card Previews
  2. Animated card HTML Codes
  3. Animated card CSS Codes

How do I make an animated card?

What is a animated card? How do you make a animated card? This script and codes were developed by Michael Chernin on 19 January 2023, Thursday.

Animated card Previews
IQ Test

Animated card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated card</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> <div class="box2"></div>
</body>
</html>

Animated card - Script Codes CSS Codes

body { background: #eee;
}
.box2 { margin: 150px; position: relative; display: inline-block; width: 250px; height: 300px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } /* Create the hidden pseudo-element */ /* include the shadow for the end state */ .box2:after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 5px; opacity: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.3); -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) } .box2:hover { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .box2:hover:after { opacity: 1 }
Animated card - Script Codes
Animated card - Script Codes
Home Page Home
Developer Michael Chernin
Username mchernin34
Uploaded January 19, 2023
Rating 3
Size 1,729 Kb
Views 6,072
Do you need developer help for Animated card?

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!

Michael Chernin (mchernin34) Script Codes
Name
Teachers Apps
Card Flipping Effect
Pure CSS Speech Bubbles
Starter Portfolio
Icon Grid
Column Drop
Mostly Fluid
Change background color based on mouse location
Popover Navigation
Slide Out Menu
Create amazing art & images 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!