Sheet Ripple on Hover

Developer
Kevin Bertram
Size
3,610 Kb
Views
10,120
  1. Sheet Ripple on Hover Previews
  2. Sheet Ripple on Hover HTML Codes
  3. Sheet Ripple on Hover CSS Codes

How do I make an sheet ripple on hover?

What is a sheet ripple on hover? How do you make a sheet ripple on hover? This script and codes were developed by Kevin Bertram on 20 December 2022, Tuesday.

Sheet Ripple on Hover Previews
IQ Test

Sheet Ripple on Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sheet Ripple on Hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="panel ov-h">
<!-- <h2 class="intro">	Premium coloring pages <br class="hide-sm">from an eclectic community of <br class="hide-sm">top-notch artists
</h2> -->
<div class="pape-snake-container"> <div class="sh sheet-1"></div> <div class="sh sheet-2"></div> <div class="sh sheet-3"></div> <div class="sh sheet-4"></div> <div class="sh sheet-5"></div> <div class="sh sheet-6"></div> <div class="sh sheet-7"></div> <div class="sh sheet-8"></div> <div class="sh sheet-9"></div> <div class="sh sheet-10"></div> <div class="sh sheet-11"></div> <div class="sh sheet-12"></div> <div class="sh sheet-13"></div> <div class="sh sheet-14"></div> <div class="sh sheet-15"></div> <div class="sh sheet-16"></div> <div class="sh sheet-17"></div> <div class="sh sheet-18"></div> <div class="sh sheet-19"></div> <div class="sh sheet-20"></div> <div class="sh sheet-21"></div> <div class="sh sheet-22"></div> <div class="sh sheet-23"></div> <div class="sh sheet-24"></div> <div class="sh sheet-25"></div> <div class="sh sheet-26"></div> <div class="sh sheet-27"></div> <div class="sh sheet-28"></div> <div class="sh sheet-29"></div> <div class="sh sheet-30"></div>
</div> </div>
</body>
</html>

Sheet Ripple on Hover - Script Codes CSS Codes

.sheet { background: #fff; display: block; width: 85px; height: 110px; position: absolute;
}
body { background: #eee;
}
.pape-snake-container { position: relative; width: 100%; margin: 0 auto; height: 100vh; z-index: 1; float: right;
}
@keyframes updown { 0% { margin-top: 0px; } 33% { margin-top: 15px; } 67% { margin-top: -15px; } 100% { margin-top: 0px; }
}
.sheet-1 { right: 17px; top: 17px; z-index: -10; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 0.125s;
}
.sheet-1:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-1 { animation: updown .5s ease-in-out; animation-delay: 0s;
}
.sheet-2 { right: 34px; top: 34px; z-index: -20; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 0.25s;
}
.sheet-2:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-2 { animation: updown .5s ease-in-out; animation-delay: 0.025s;
}
.sheet-3 { right: 51px; top: 51px; z-index: -30; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 0.375s;
}
.sheet-3:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-3 { animation: updown .5s ease-in-out; animation-delay: 0.05s;
}
.sheet-4 { right: 68px; top: 68px; z-index: -40; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 0.5s;
}
.sheet-4:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-4 { animation: updown .5s ease-in-out; animation-delay: 0.075s;
}
.sheet-5 { right: 85px; top: 85px; z-index: -50; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 0.625s;
}
.sheet-5:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-5 { animation: updown .5s ease-in-out; animation-delay: 0.1s;
}
.sheet-6 { right: 102px; top: 102px; z-index: -60; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 0.75s;
}
.sheet-6:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-6 { animation: updown .5s ease-in-out; animation-delay: 0.125s;
}
.sheet-7 { right: 119px; top: 119px; z-index: -70; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 0.875s;
}
.sheet-7:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-7 { animation: updown .5s ease-in-out; animation-delay: 0.15s;
}
.sheet-8 { right: 136px; top: 136px; z-index: -80; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 1s;
}
.sheet-8:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-8 { animation: updown .5s ease-in-out; animation-delay: 0.175s;
}
.sheet-9 { right: 153px; top: 153px; z-index: -90; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 1.125s;
}
.sheet-9:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-9 { animation: updown .5s ease-in-out; animation-delay: 0.2s;
}
.sheet-10 { right: 170px; top: 170px; z-index: -100; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 1.25s;
}
.sheet-10:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-10 { animation: updown .5s ease-in-out; animation-delay: 0.225s;
}
.sheet-11 { right: 187px; top: 187px; z-index: -110; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 1.375s;
}
.sheet-11:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-11 { animation: updown .5s ease-in-out; animation-delay: 0.25s;
}
.sheet-12 { right: 204px; top: 204px; z-index: -120; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 1.5s;
}
.sheet-12:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-12 { animation: updown .5s ease-in-out; animation-delay: 0.275s;
}
.sheet-13 { right: 221px; top: 221px; z-index: -130; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 1.625s;
}
.sheet-13:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-13 { animation: updown .5s ease-in-out; animation-delay: 0.3s;
}
.sheet-14 { right: 238px; top: 238px; z-index: -140; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 1.75s;
}
.sheet-14:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-14 { animation: updown .5s ease-in-out; animation-delay: 0.325s;
}
.sheet-15 { right: 255px; top: 255px; z-index: -150; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 1.875s;
}
.sheet-15:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-15 { animation: updown .5s ease-in-out; animation-delay: 0.35s;
}
.sheet-16 { right: 272px; top: 272px; z-index: -160; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 2s;
}
.sheet-16:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-16 { animation: updown .5s ease-in-out; animation-delay: 0.375s;
}
.sheet-17 { right: 289px; top: 289px; z-index: -170; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 2.125s;
}
.sheet-17:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-17 { animation: updown .5s ease-in-out; animation-delay: 0.4s;
}
.sheet-18 { right: 306px; top: 306px; z-index: -180; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 2.25s;
}
.sheet-18:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-18 { animation: updown .5s ease-in-out; animation-delay: 0.425s;
}
.sheet-19 { right: 323px; top: 323px; z-index: -190; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 2.375s;
}
.sheet-19:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-19 { animation: updown .5s ease-in-out; animation-delay: 0.45s;
}
.sheet-20 { right: 340px; top: 340px; z-index: -200; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 2.5s;
}
.sheet-20:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-20 { animation: updown .5s ease-in-out; animation-delay: 0.475s;
}
.sheet-21 { right: 357px; top: 357px; z-index: -210; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 2.625s;
}
.sheet-21:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-21 { animation: updown .5s ease-in-out; animation-delay: 0.5s;
}
.sheet-22 { right: 374px; top: 374px; z-index: -220; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 2.75s;
}
.sheet-22:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-22 { animation: updown .5s ease-in-out; animation-delay: 0.525s;
}
.sheet-23 { right: 391px; top: 391px; z-index: -230; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 2.875s;
}
.sheet-23:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-23 { animation: updown .5s ease-in-out; animation-delay: 0.55s;
}
.sheet-24 { right: 408px; top: 408px; z-index: -240; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 3s;
}
.sheet-24:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-24 { animation: updown .5s ease-in-out; animation-delay: 0.575s;
}
.sheet-25 { right: 425px; top: 425px; z-index: -250; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 3.125s;
}
.sheet-25:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-25 { animation: updown .5s ease-in-out; animation-delay: 0.6s;
}
.sheet-26 { right: 442px; top: 442px; z-index: -260; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 3.25s;
}
.sheet-26:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-26 { animation: updown .5s ease-in-out; animation-delay: 0.625s;
}
.sheet-27 { right: 459px; top: 459px; z-index: -270; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 3.375s;
}
.sheet-27:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-27 { animation: updown .5s ease-in-out; animation-delay: 0.65s;
}
.sheet-28 { right: 476px; top: 476px; z-index: -280; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 3.5s;
}
.sheet-28:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-28 { animation: updown .5s ease-in-out; animation-delay: 0.675s;
}
.sheet-29 { right: 493px; top: 493px; z-index: -290; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 3.625s;
}
.sheet-29:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-29 { animation: updown .5s ease-in-out; animation-delay: 0.7s;
}
.sheet-30 { right: 510px; top: 510px; z-index: -300; background: #fff; display: block; width: 170px; height: 220px; position: absolute; transition: margin-top .25s; transition-delay: 3.75s;
}
.sheet-30:first-child { box-shadow: -1px 1px 0px #eee;
}
.pape-snake-container:hover .sheet-30 { animation: updown .5s ease-in-out; animation-delay: 0.725s;
}
.sh:nth-child(7n+2) { background: #BE1E2D;
}
.sh:nth-child(7n+3) { background: #F15A29;
}
.sh:nth-child(7n+4) { background: yellow;
}
.sh:nth-child(7n+5) { background: #48B74D;
}
.sh:nth-child(7n+6) { background: #2B8EBF;
}
.sh:nth-child(7n+7) { background: #3A3C97;
}
.sh:nth-child(7n+8) { background: #92278F;
}
.panel { padding: 4em 3em;
}
.panel p { margin-bottom: 8px; font-size: 1em;
}
.panel ul { font-size: .9em;
}
.panel h3 { margin-bottom: 1.5em;
}
.panel h2 { margin-top: 0; margin-bottom: 2em; font-family: "Nunito"; font-weight: 300;
}
h2.intro { font-size: 1.5em; font-weight: 300; text-align: left; margin: 1.5em; position: absolute; z-index: 1000;
}
Sheet Ripple on Hover - Script Codes
Sheet Ripple on Hover - Script Codes
Home Page Home
Developer Kevin Bertram
Username kbrtrm
Uploaded December 20, 2022
Rating 3
Size 3,610 Kb
Views 10,120
Do you need developer help for Sheet Ripple on Hover?

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!

Kevin Bertram (kbrtrm) Script Codes
Name
Tail rose iris
Admiss Mockup
Email Template
Full Width Peppered
SAIC Campaign Styles
Crossword Grid SCSS 15
Press Release Full Text
Registration Options
Tail rose iris lined
Basic Story Cards
Create amazing captions 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!