Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 1. create a container with 4 columns
- 2. put one button in each column
- 3. paste this code into the style field for each:
- position: relative;
- z-index: 10;
- top: -60px; /*you'll probably need to adjust this until it looks right under your img. negative numbers make the button go up and positive ones make it go down*/
- transform: rotate(90deg);
- 4. put your image on top of the 4 column container, you can leave it outside a container or inside one, just make sure it's "glued" to the 4 column container.
- 5. paste this into an embed:
- <style>
- .buttons {
- transition: transform .3s ease-in-out;
- }
- .buttons:hover {
- transform: translateY(50px);
- }
- </style>
- 6. technically, you're done! you'll probably have to adjust how close the buttons are in the settings to the 4 column container, how big the text inside is, the lenght of the buttons, and it's positioning/how much of it shows before you hover it until it looks just right though.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement