Advertisement
soakedry

flower mask transition menu

Jan 29th, 2022
448
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.57 KB | None | 0 0
  1. //*—-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—-*//
  2.  
  3. <html>
  4. <link rel="preconnect" href="https://fonts.googleapis.com">
  5. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  6. <link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap" rel="stylesheet">
  7. <head>
  8. <style>
  9.  
  10. .eee {
  11. position: relative;
  12. width: 70%;
  13. transition: all 0.5s;
  14. -webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
  15. -webkit-mask-size: 250%;
  16. -webkit-mask-repeat: no-repeat;
  17. -webkit-mask-position: center;
  18. margin:auto;
  19. border-style:solid;
  20. border-color: #FFDCF7;
  21. }
  22.  
  23. .yes {
  24. display: block;
  25. width: 100%;
  26. height: 100%;
  27. transition: all 0.5s;
  28. }
  29.  
  30. .eee:hover {
  31. transform: scale(1) rotate(-5deg);
  32. }
  33.  
  34. .overlay {
  35. position: absolute;
  36. bottom: 0;
  37. left: 0;
  38. right: 0;
  39. background-color: #FFFFFFB8;
  40. overflow: hidden;
  41. width: 100%;
  42. height: 0;
  43. transition: all 0.5s;
  44. -webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
  45. -webkit-mask-size: 70%;
  46. -webkit-mask-repeat: no-repeat;
  47. -webkit-mask-position: center;
  48. }
  49.  
  50. .eee:hover {
  51. -webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
  52. -webkit-mask-size: 70%;
  53. -webkit-mask-repeat: no-repeat;
  54. -webkit-mask-position: center;
  55. transition: all 0.5s;
  56.  
  57. }
  58.  
  59. .eee:hover .overlay {
  60. height: 100%;
  61. -webkit-mask-image: url(https://dl.dropboxusercontent.com/s/zyr8ntyab6ya13q/flower%20mask%20rev.png);
  62. -webkit-mask-size: 70%;
  63. -webkit-mask-repeat: no-repeat;
  64. -webkit-mask-position: center;
  65. }
  66.  
  67. .text {
  68. position: absolute;
  69. top: 50%;
  70. left: 50%;
  71. -webkit-transform: translate(-50%, -50%);
  72. -ms-transform: translate(-50%, -50%);
  73. transform: translate(-50%, -50%);
  74. text-align: auto;
  75. }
  76.  
  77. a.ace:link, a.ace:visited {
  78. text-decoration:none;
  79. text-shadow: 0 0 3px #1AD2FF;
  80. font-family: 'Mochiy Pop P One';
  81. color: #B434FF;
  82. font-size: 15px;
  83. }
  84.  
  85. a.ace:hover {
  86. cursor:help;
  87. }
  88.  
  89. }
  90. </style>
  91. </head>
  92.  
  93. <body>
  94. <div class="eee">
  95. <img src="https://i.postimg.cc/qMvcYzHP/0860-F216-689-C-4-CC8-89-AD-C552-B7-C07233.gif" alt="" class="yes">
  96. <div class="overlay">
  97. <div class="text">
  98. <a href="#home" class="ace">home.</a>
  99. <p><a href="#info" class="ace">one.</a></p>
  100. <p><a href="#etc" class="ace">two.</a></p>
  101. <p><a href="#wan" class="ace">three.</a></p>
  102. </div>
  103. </div>
  104. </div>
  105. </body>
  106. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement