Advertisement
powys

claris.crd.co menu made by me

May 30th, 2021 (edited)
9,781
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.65 KB | None
  1.  
  2. <head>
  3. <link rel="preconnect" href="https://fonts.gstatic.com">
  4. <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
  5.  
  6. <style>
  7. .container {
  8. position: relative;
  9. width: 100%;
  10. }
  11.  
  12.  
  13. .image { /* edit border + width/height of image here */
  14. display: block;
  15. border: 3px double #000;
  16. width: 100%;
  17. height: auto;
  18. }
  19.  
  20. .overlay { /*the menu part */
  21. position: absolute;
  22. bottom: 100%;
  23. left: 0;
  24. right: 0;
  25. overflow: hidden;
  26. width: 100%;
  27. height:0;
  28. transition: .5s ease;
  29. }
  30.  
  31. .container:hover .overlay {
  32. bottom: 84%;
  33. height: 16%;
  34. }
  35. div.scrollmenu {
  36. background-color: #fff;
  37. overflow: auto;
  38. white-space: nowrap;
  39. opacity:0.7;
  40. }
  41.  
  42. div.scrollmenu a { /*code of menu */
  43. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  44. font-size:95%;
  45. font-family: 'Fredoka One', cursive;
  46. font-weight: normal;
  47. display: inline-block;
  48. color: white;
  49. text-align: left;
  50. padding: 11px;
  51. text-decoration: none;
  52. }
  53.  
  54. div.scrollmenu a:hover {
  55. background-color: #000;
  56. opacity:0.3;
  57.  
  58. }
  59. }
  60.  
  61. .text {
  62. color: white;
  63. font-size: 20px;
  64. position: absolute;
  65. top: 50%;
  66. left: 50%;
  67. -webkit-transform: translate(-50%, -50%);
  68. -ms-transform: translate(-50%, -50%);
  69. transform: translate(-50%, -50%);
  70. text-align: center;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75.  
  76. <div class="container">
  77. <img src="https://i2.wp.com/dianaurban.com/wp-content/uploads/2017/07/01-cat-stretching-feet.gif?resize=500%2C399&ssl=1" alt="Avatar" class="image">
  78. <div class="overlay">
  79. <div class="scrollmenu">
  80. <a href="#home">link one</a>
  81. <a href="#i">link two</a>
  82. <a href="#ii">link three</a>
  83. <a href="#iii">link four</a>
  84.  
  85. </div>
  86.  
  87. </div>
  88.  
  89. </div>
  90. </body>
  91.  
Advertisement
RAW Paste Data Copied
Advertisement