Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
- <style>
- .container {
- position: relative;
- width: 100%;
- }
- .image { /* edit border + width/height of image here */
- display: block;
- border: 3px double #000;
- width: 100%;
- height: auto;
- }
- .overlay { /*the menu part */
- position: absolute;
- bottom: 100%;
- left: 0;
- right: 0;
- overflow: hidden;
- width: 100%;
- height:0;
- transition: .5s ease;
- }
- .container:hover .overlay {
- bottom: 84%;
- height: 16%;
- }
- div.scrollmenu {
- background-color: #fff;
- overflow: auto;
- white-space: nowrap;
- opacity:0.7;
- }
- div.scrollmenu a { /*code of menu */
- text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
- font-size:95%;
- font-family: 'Fredoka One', cursive;
- font-weight: normal;
- display: inline-block;
- color: white;
- text-align: left;
- padding: 11px;
- text-decoration: none;
- }
- div.scrollmenu a:hover {
- background-color: #000;
- opacity:0.3;
- }
- }
- .text {
- color: white;
- font-size: 20px;
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <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">
- <div class="overlay">
- <div class="scrollmenu">
- <a href="#home">link one</a>
- <a href="#i">link two</a>
- <a href="#ii">link three</a>
- <a href="#iii">link four</a>
- </div>
- </div>
- </div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement