Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //*—-REMOVE THIS BEFORE USE! credit not necessary! original code is not by me, this is just mine that i adjusted myself and created the mask for. the original code was for a heart mask menu found on cakepop crd. apologises for the image and wacky measurements—-*//
- <html>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap" rel="stylesheet">
- <head>
- <style>
- .eee {
- position: relative;
- width: 70%;
- transition: all 0.5s;
- -webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
- -webkit-mask-size: 250%;
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-position: center;
- margin:auto;
- border-style:solid;
- border-color: #FFDCF7;
- }
- .yes {
- display: block;
- width: 100%;
- height: 100%;
- transition: all 0.5s;
- }
- .eee:hover {
- transform: scale(1) rotate(-5deg);
- }
- .overlay {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: #FFFFFFB8;
- overflow: hidden;
- width: 100%;
- height: 0;
- transition: all 0.5s;
- -webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
- -webkit-mask-size: 70%;
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-position: center;
- }
- .eee:hover {
- -webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
- -webkit-mask-size: 70%;
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-position: center;
- transition: all 0.5s;
- }
- .eee:hover .overlay {
- height: 100%;
- -webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
- -webkit-mask-size: 70%;
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-position: center;
- }
- .text {
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- text-align: auto;
- }
- a.ace:link, a.ace:visited {
- text-decoration:none;
- text-shadow: 0 0 3px #1AD2FF;
- font-family: 'Mochiy Pop P One';
- color: #B434FF;
- font-size: 15px;
- }
- a.ace:hover {
- cursor:help;
- }
- }
- </style>
- </head>
- <body>
- <div class="eee">
- <img src="https://i.postimg.cc/qMvcYzHP/0860-F216-689-C-4-CC8-89-AD-C552-B7-C07233.gif" alt="" class="yes">
- <div class="overlay">
- <div class="text">
- <a href="#home" class="ace">home.</a>
- <p><a href="#info" class="ace">one.</a></p>
- <p><a href="#etc" class="ace">two.</a></p>
- <p><a href="#wan" class="ace">three.</a></p>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement