Created
December 9, 2024 19:59
-
-
Save tarasowski/e02bf58a1079738f498aa72c0fe2f4f2 to your computer and use it in GitHub Desktop.
text slide hover effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Text Slide Hover Effect</title> | |
| <style> | |
| /* Container styling */ | |
| .hover-slide { | |
| position: relative; | |
| display: inline-block; | |
| font-size: 2rem; | |
| font-weight: bold; | |
| overflow: hidden; | |
| cursor: pointer; | |
| opacity: 0.5; | |
| } | |
| /* Base text styling */ | |
| .hover-slide .text { | |
| display: block; | |
| transform: translateY(0); | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| /* Pseudo-element for the hover effect */ | |
| .hover-slide::after { | |
| content: attr(data-hover); /* Text for hover effect */ | |
| position: absolute; | |
| left: 0; | |
| top: 100%; | |
| width: 100%; | |
| transform: translateY(0); | |
| transition: transform 0.3s ease-in-out; | |
| color: gray; /* Color of the hover text */ | |
| opacity: 0.5; | |
| } | |
| /* Hover effect */ | |
| .hover-slide:hover .text { | |
| transform: translateY(-100%); | |
| } | |
| .hover-slide:hover::after { | |
| transform: translateY(-100%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hover-slide" data-hover="[email protected]"> | |
| <span class="text">[email protected]</span> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment