Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <style>
- .container {
- position: relative;
- width: 100%;
- }
- .image {
- opacity: 1;
- width: 100%;
- height: auto;
- opacity: 1;
- transition: .5s ease;
- backface-visibility: hidden;
- border-width:7px;
- border-style:solid;
- border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
- }
- .overlay {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: #FFF;
- overflow: hidden;
- width: 0;
- height: 100%;
- transition: .5s ease;
- }
- .container:hover .overlay {
- width: 35%;
- opacity: 0.8;
- }
- .container:hover .image {
- opacity: 0.3;
- }
- .link {
- text-decoration:none;
- text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
- font-size:20px;
- font-weight: bold;
- font-style: italic;
- position: absolute;
- div align:"left";
- top: 50%;
- color: #fff;
- left: 40%;
- -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- white-space: nowrap;
- </style>
- </head>
- <body>
- <div class="container">
- <!-- change the image below only--!>
- <img src="https://pbs.twimg.com/media/EqLCzecUcAEtsSv?format=jpg&name=large" alt=" " class="image">
- <div class="overlay">
- <div class="middle">
- <div class="link"><a href="#home">index</a>
- <p></p>
- <a href="#i">about</a>
- <p></p>
- <a href="#ii">rules</a>
- <p></p>
- <a href="#iii">love</a>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement