Test overlay
How do I make an test overlay?
What is a test overlay? How do you make a test overlay? This script and codes were developed by Yuri Morini on 24 November 2022, Thursday.
Test overlay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Test overlay</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <div class="trigger">Posiziona qui il mouse</div> <div class="list"><span>lista locali</span></div>
</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>
Test overlay - Script Codes CSS Codes
body { margin:0; height:100%; overflow:hidden
}
.trigger { position:absolute; bottom:0; height:100px; color:#fff; background:#000; width:100%; text-align:center; font-size:30px; line-height:100px; cursor:pointer; z-index:999;
}
.trigger:hover { color:#dfbe62;
}
.list { width:100%; position:absolute; background:#111; height:100%; z-index:1 text-align:center; top:100%; -webkit-transition: all 1s .5s ease; -moz-transition: all 1s .5s ease; -ms-transition: all 1s .5s ease; transition: all 1s .5s ease;
}
.list span { position:absolute; display:block; top:20%; text-align:center; width:100%; font-size:20px; color:#fff;
}
.list.visible { top:0;
}
Test overlay - Script Codes JS Codes
$('.trigger').on('mouseover', function() { $('.list').toggleClass('visible', true);
});
$('.trigger').on('mouseleave', function() { $('.list').toggleClass('visible', false);
});
Developer | Yuri Morini |
Username | yurimorini |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 1,907 Kb |
Views | 14,168 |
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 |
Faux column absolute wrapper | 1,823 Kb |
Foundation Reveal error | 2,048 Kb |
Line spinner | 1,736 Kb |
Fixed rotated square loader test | 1,657 Kb |
SVG clipped path accordion | 3,035 Kb |
Page slider | 2,044 Kb |
Testing vertical flex | 2,131 Kb |
Grid Layout changer | 2,314 Kb |
Albino button | 1,505 Kb |
Testing minimal input field | 1,633 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 |
Angular-HAML | Cwacht | 2,022 Kb |
Popover Example | Seanboom | 2,429 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Easing | GreenSock | 2,043 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Segments mouse following | Nosir | 2,909 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Custom Select Element | Agrayson | 3,616 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!