Faux 3D grid with image reveal
How do I make an faux 3d grid with image reveal?
Image reveal on hover. What is a faux 3d grid with image reveal? How do you make a faux 3d grid with image reveal? This script and codes were developed by Andrew Canham on 23 August 2022, Tuesday.
Faux 3D grid with image reveal - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title> Faux 3D grid with image reveal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pair"> <div class="skew"> <div class="skew-inner"> </div> </div> <div class="skew rotate"> <div class="skew-content"> <div class="skew-content-inner"> </div> </div> <div class="skew-inner"> </div> </div>
</div>
<div class="pair pair2"> <div class="skew"> <div class="skew-inner"> </div> </div> <div class="skew rotate"> <div class="skew-content"> <div class="skew-content-inner"> </div> </div> <div class="skew-inner"> </div> </div>
</div>
<div class="pair pair3 alternate"> <div class="skew"> <div class="skew-inner"> </div> </div> <div class="skew rotate"> <div class="skew-content"> <div class="skew-content-inner"> </div> </div> <div class="skew-inner"> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Faux 3D grid with image reveal - Script Codes CSS Codes
div.pair { width: 600px;
}
div.pair div.skew { height: 200px; position: absolute; width: 320px;
}
div.pair div.skew div.skew-inner,
div.pair div.skew div.skew-content { background: #efefef; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5); height: 100%; overflow: hidden; position: absolute; -webkit-transform: skew(-22.5deg); transform: skew(-22.5deg); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 0.3s 0.3s linear; transition: all 0.3s 0.3s linear; width: 100%; z-index: 10;
}
div.pair div.skew.rotate { -webkit-transform: translate3d(346px, 143px, 0) rotate(45deg); transform: translate3d(346px, 143px, 0) rotate(45deg);
}
div.pair div.skew.rotate div.skew-inner { -webkit-transform: skew(22.5deg); transform: skew(22.5deg); -webkit-transition: all 0.3s 0s linear; transition: all 0.3s 0s linear;
}
div.pair div.skew.rotate div.skew-content { background: red; height: 100%; left: 0; position: absolute; -webkit-transform: skew(22.5deg); transform: skew(22.5deg); -webkit-transition: all 0.3s 0s linear; transition: all 0.3s 0s linear; top: 0; width: 0; z-index: 20;
}
div.pair div.skew.rotate div.skew-content div.skew-content-inner { background: url("http://s4c.cymru/media/media_assets/y_gwyll_main_clean_image-lowres.jpg"); height: 100%; width: 100%;
}
div.pair:hover div.skew div.skew-content { -webkit-transition: all 0.3s 0.3s linear; transition: all 0.3s 0.3s linear; width: 100%;
}
div.pair:hover div.skew div.skew-inner { box-shadow: inset 320px 0 0 rgba(0, 0, 0, 0.5); -webkit-transition: all 0.3s 0s linear; transition: all 0.3s 0s linear;
}
div.pair:hover div.skew.rotate div.skew-inner { -webkit-transition: all 0.3s 0.3s linear; transition: all 0.3s 0.3s linear;
}
div.pair.alternate div.skew div.skew-inner { -webkit-transition: all 0.3s 0s linear; transition: all 0.3s 0s linear;
}
div.pair.alternate div.skew.rotate { -webkit-transform: translate3d(-204px, -85px, 0) rotate(45deg); transform: translate3d(-204px, -85px, 0) rotate(45deg);
}
div.pair.alternate div.skew.rotate div.skew-inner { -webkit-transition: all 0.3s 0.3s linear; transition: all 0.3s 0.3s linear;
}
div.pair.alternate:hover div.skew div.skew-inner { -webkit-transition: all 0.3s 0.3s linear; transition: all 0.3s 0.3s linear;
}
div.pair.alternate:hover div.skew.rotate div.skew-inner { -webkit-transition: all 0.3s 0s linear; transition: all 0.3s 0s linear;
}
div.pair2 { -webkit-transform: translate3d(550px, 228px, 0); transform: translate3d(550px, 228px, 0);
}
div.pair3 { -webkit-transform: translate3d(466px, 430px, 0); transform: translate3d(466px, 430px, 0);
}
Developer | Andrew Canham |
Username | candroo |
Uploaded | August 23, 2022 |
Rating | 3 |
Size | 2,667 Kb |
Views | 36,432 |
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 |
3D cube - hover rotate | 2,980 Kb |
3D List expansion | 4,719 Kb |
Faux 3D grid | 2,284 Kb |
Color hover buttons | 2,840 Kb |
A Pen by Andrew Canham | 2,789 Kb |
Footer animation | 4,240 Kb |
Spread cards | 4,442 Kb |
Angled nav reveal | 4,687 Kb |
Social media footer | 5,281 Kb |
3D Fold out reveal | 4,535 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 |
Ball Physics | Getsetbro | 3,149 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
The Monty Hall Problem | Melatonind | 4,360 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 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!