Hover thing
How do I make an hover thing?
What is a hover thing? How do you make a hover thing? This script and codes were developed by Jordan on 03 December 2022, Saturday.
Hover thing - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover thing</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html{ background:#212121;
}
.outer{ background:#54D699; width:12em; height:12em; border-radius:0 7em; border-left:10em transparent; border-top:0em; border-right:2.25em #54D699 groove; border-bottom:2.25em #54D699 groove; box-shadow:.25em .25em 1em black, inset 1em 0 2em #54D699, inset 0 1em 2em #54D699, inset -1em 0 2em #2eae6e, inset 0 -1em 2em #2eae6e; margin:0 auto; position:relative; top:3.5em; transform:rotate(45deg);
}
.outer:hover{ box-shadow:0 0 .5em black,inset .25em .125em 100em black,inset .25em .125em 2em #54D6C0,inset .25em .125em 5em black; -webkit-filter:hue-rotate(2000deg); opacity:.9; transition: box-shadow .5s ease-in, opacity .5s ease-in, -webkit-filter 10s ease-in;
}
.content{ width:80%; height:80%; position:relative; top:10%; left:10%; border-radius:0 4.5em;
}
.outer:hover .content { background:white; box-shadow:0 0 10em white, 0 0 4em #34A999, 1em -1em 3em black, 2em 3em 5em black, -1em 1em 3em black, -2em -3em 5em black; transition: background 1.5s ease-in, box-shadow 1s ease-in;
}
.content a{ transform:rotate(-45deg); display:block; width:100%; height:100%; text-align:center; line-height:5em; font-size:2em; font-family: megrim, sans-serif; color:white; text-shadow:0 2px 10px #34A999;
}
.outer:hover .content a{ opacity:0; transition: opacity .5s ease-out;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="outer"> <div class="content"> <a>hover</a> </div>
</div> <script src='https://use.edgefonts.net/megrim:n4.js'></script>
</body>
</html>
Hover thing - Script Codes CSS Codes
html{ background:#212121;
}
.outer{ background:#54D699; width:12em; height:12em; border-radius:0 7em; border-left:10em transparent; border-top:0em; border-right:2.25em #54D699 groove; border-bottom:2.25em #54D699 groove; box-shadow:.25em .25em 1em black, inset 1em 0 2em #54D699, inset 0 1em 2em #54D699, inset -1em 0 2em #2eae6e, inset 0 -1em 2em #2eae6e; margin:0 auto; position:relative; top:3.5em; transform:rotate(45deg);
}
.outer:hover{ box-shadow:0 0 .5em black,inset .25em .125em 100em black,inset .25em .125em 2em #54D6C0,inset .25em .125em 5em black; -webkit-filter:hue-rotate(2000deg); opacity:.9; transition: box-shadow .5s ease-in, opacity .5s ease-in, -webkit-filter 10s ease-in;
}
.content{ width:80%; height:80%; position:relative; top:10%; left:10%; border-radius:0 4.5em;
}
.outer:hover .content { background:white; box-shadow:0 0 10em white, 0 0 4em #34A999, 1em -1em 3em black, 2em 3em 5em black, -1em 1em 3em black, -2em -3em 5em black; transition: background 1.5s ease-in, box-shadow 1s ease-in;
}
.content a{ transform:rotate(-45deg); display:block; width:100%; height:100%; text-align:center; line-height:5em; font-size:2em; font-family: megrim, sans-serif; color:white; text-shadow:0 2px 10px #34A999;
}
.outer:hover .content a{ opacity:0; transition: opacity .5s ease-out;
}
Developer | Jordan |
Username | Jordan |
Uploaded | December 03, 2022 |
Rating | 3 |
Size | 2,514 Kb |
Views | 12,144 |
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 |
Warp V2 | 9,549 Kb |
Wut | 7,627 Kb |
LOADING | 2,095 Kb |
Liquid | 6,785 Kb |
Webkit Filter Neon Buttons | 2,651 Kb |
V.35 The Monolith Update - Hero Release Notes | 12,045 Kb |
Div Screen Saver | 8,930 Kb |
CSS Isometric | 2,314 Kb |
A Pen by Jordan | 2,284 Kb |
Visual Experiment | 2,137 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 |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Background Images | Jooonebug | 2,100 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 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!