Figure Flip Card

Developer
Brad Bodine
Size
3,040 Kb
Views
68,816
  1. Figure Flip Card Previews
  2. Figure Flip Card HTML Codes
  3. Figure Flip Card CSS Codes
  4. Figure Flip Card JS Codes

How do I make an figure flip card?

A figure flip card that displays an image on the front side with a caption on the back side. This is not meant to have html content on the front side of the card.. What is a figure flip card? How do you make a figure flip card? This script and codes were developed by Brad Bodine on 11 August 2022, Thursday.

Figure Flip Card Previews
IQ Test

Figure Flip Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Figure Flip Card</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flippy"> <figure> <img src="http://placehold.it/300x200/BAD80A/003D6B/&text=Flippy " alt=""/> <figcaption> <h2>Hi. I'm Flippy!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <a href="">link</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="">quis</a> nost.</p> </figcaption> </figure>
</div>
<div class="flippy"> <figure> <img src="http://placehold.it/300x200/BAD80A/003D6B/&text=Flippy " alt=""/> <figcaption> <h2>Hi. I'm Flippy!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <a href="">link</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="">quis</a> nost.</p> </figcaption> </figure>
</div>
<div class="flippy"> <figure> <img src="http://placehold.it/300x200/BAD80A/003D6B/&text=Flippy " alt=""/> <figcaption> <h2>Hi. I'm Flippy!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <a href="">link</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="">quis</a> nost.</p> </figcaption> </figure>
</div>
<div class="flippy"> <figure> <img src="http://placehold.it/300x200/BAD80A/003D6B/&text=Flippy " alt=""/> <figcaption> <h2>Hi. I'm Flippy!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <a href="">link</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="">quis</a> nost.</p> </figcaption> </figure>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Figure Flip Card - Script Codes CSS Codes

.flippy { width: 300px; height: 200px;
}
.flippy figure { width: 300px; height: 200px; position: relative; margin: 0; padding: 0;
}
.flippy figure img, .flippy figure figcaption { position: absolute; top: 0; left: 0; width: 300px; height: 200px; border-radius: 10px; box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all .5s; transition: all .5s;
}
.flippy figure figcaption { padding: 29px 44px; background-color: #003D6B; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg);
}
.flippy figure figcaption h2, .flippy figure figcaption p { font-family: 'Lato'; color: #fff;
}
.flippy figure figcaption h2 { font-size: 20px;
}
.flippy figure figcaption p { font-size: 12px; line-height: 18px;
}
.flippy figure figcaption a { color: #BAD80A;
}
.flippy figure:hover img { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.flippy figure:hover figcaption { -webkit-transform: rotateY(0); transform: rotateY(0);
}
.flippy { margin: 5px;
}
body { background: #666666; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}

Figure Flip Card - Script Codes JS Codes

// A figure flip card that displays an image on the front side with a caption on the back side.
// This is not meant to have html content on the front side of the card.
Figure Flip Card - Script Codes
Figure Flip Card - Script Codes
Home Page Home
Developer Brad Bodine
Username bbodine1
Uploaded August 11, 2022
Rating 3
Size 3,040 Kb
Views 68,816
Do you need developer help for Figure Flip 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!

Brad Bodine (bbodine1) Script Codes
Name
Tile Slanted Corner
Strike Through
Simple slanted corner
CSS3 Checkbox Styles
Single L shape element link
Foundation Full Width Rows
CSS3 Notepad
Card flip and zoom
Modular Flip Card
CSS Arrows
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!