Rolling Word Hover

Developer
Chung Man Chau
Size
2,541 Kb
Views
6,072
  1. Rolling Word Hover Previews
  2. Rolling Word Hover HTML Codes
  3. Rolling Word Hover CSS Codes

How do I make an rolling word hover?

What is a rolling word hover? How do you make a rolling word hover? This script and codes were developed by Chung Man Chau on 15 January 2023, Sunday.

Rolling Word Hover Previews
IQ Test

Rolling Word Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rolling Word Hover</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Pathway+Gothic+One'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="nav"> <ul class="menu"> <li class="menu__item"> <span class="menu__text menu__text--first" data-text="About">About</span> <span class="menu__text menu__text--second" data-text="Us">Us</span> </li> <li class="menu__item"> <span class="menu__text menu__text--first" data-text="Latest">Latest</span> <span class="menu__text menu__text--second" data-text="News">News</span> </li> <li class="menu__item"> <span class="menu__text menu__text--first" data-text="Contact">Contact</span> <span class="menu__text menu__text--second" data-text="Us">Us</span> </li> </ul>
</nav>
</body>
</html>

Rolling Word Hover - Script Codes CSS Codes

body { display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 1.6rem; font-family: Arial; background: #333; color: #FAFAFA;
}
.nav { width: 100%; border-bottom: 3px solid #797979; padding-bottom: 10px; text-align: center;
}
.menu { display: inline-flex; justify-content: space-around; width: 80vw; margin: 0; padding: 0;
}
.menu__item { margin: 0; padding: 0; list-style-type: none; cursor: pointer; overflow: hidden; white-space: nowrap; text-align: center;
}
.menu__item:hover .menu__text--first { transform: translateY(100%);
}
.menu__item:hover .menu__text--second { transform: translateY(-100%);
}
.menu__text { display: inline-block; position: relative; font-weight: bold; transition: transform .4s ease-in-out;
}
.menu__text:before { content: attr(data-text); position: absolute;
}
.menu__text--first { color: #03A9F4;
}
.menu__text--first:before { color: #FFF; bottom: 100%;
}
.menu__text--second:before { top: 100%; color: #03A9F4;
}
Rolling Word Hover - Script Codes
Rolling Word Hover - Script Codes
Home Page Home
Developer Chung Man Chau
Username chungman93
Uploaded January 15, 2023
Rating 3
Size 2,541 Kb
Views 6,072
Do you need developer help for Rolling Word Hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chung Man Chau (chungman93) Script Codes
Name
Google Plus Button
Iphone Mockup
Delete Hover
Fixed Background Image - No Repaint
Hovering Snake
Expanding Tiles
Target Last Row - CSS Only
CSS Masking Button Hovers
Responsive CSS Grid
Color Variables
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!