Fill Text Effect on Hover Using HTML & CSS
In this blog, This code creates a simple webpage with an “Fill Text Effect” on the header “codehack”. The webpage has a basic structure with a doctype, html, head and body tags. The head includes a link to a stylesheet called “style.css” and a title for the webpage. The body includes a single header element with the text “codehack”.
CSS styles are applie to the body to center the content on the page and set a minimum height of 100vh. This causes the body to take up the full height of the viewport. The font-family is use to Verdana, Geneva, Tahoma, and sans-serif.
Styles are appli to the h1 element, which contains the text “codehack”. The styles remove any margin and padding, increase the font-size and change the text to uppercase. The text color is use to #ccc, a light gray color.
The “Fill Text Effect” is creat by using the pseudo-element ::before. The content “codehack” is assign to the ::before element, and it is position at the top-left corner of the h1 element. The color #262626 (dark gray) is applie to the ::before element, and its width is set to 0% with the overflow set to hidden. The transition property is set to all 0.5s, causing any changes to the element to take 0.5 seconds to complete.
When the h1 element is hover over, the width of the ::before element changes to 100%. This causes the ::before element to become visible and fill the h1 element, creating the “Fill Text Effect”.
Video Tutorial of Fill Text Effect
To see a live demonstration of the Fill Text Effect, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Fill Text Effect
HTML Part:
Create a new file with the name “index.html
” and add the provide code to it. Ensure the file has a “.html
” extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Fill Text Effect</title> </head> <body> <h1>codehack</h1> </body> </html>
This is an HTML code that creates a webpage with a heading that displays text “codehack” in an h1 element. The code includes a doctype declaration, a head section with meta information and a link to a CSS stylesheet, and a body section containing an h1 heading. The CSS stylesheet “style.css” is link to the HTML to style the heading text. The webpage title is “Fill Text Effect”.
CSS Part:
Create a new CSS file name “style.css
” and copy the provide code into it. Ensure that the file has a “.css
” extension.
body{ margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: Verdana, Geneva, Tahoma, sans-serif; } h1{ margin: 0; padding: 0; font-size: 120px; text-transform: uppercase; position: relative; color: #ccc; } h1::before{ content: 'codehack'; position: absolute; top: 0; left: 0; color: #262626; width: 0%; overflow: hidden; transition: all 0.5s; } h1:hover::before{ width: 100%; }
This CSS code sets the body’s margin to 0, display to flex, justification and alignment of items to center, minimum height to 100vh, and font-family to Verdana, Geneva, Tahoma, and sans-serif. It also gives the h1 tag a margin and padding of 0, font-size of 120px, text-transform of uppercase, position of relative, and color of #ccc. The code also adds a ::before pseudo-element to the h1 tag, with the content set to ‘codehack’, position set to absolute, top and left set to 0, color set to #262626, width set to 0%, and overflow set to hidden. The code also adds a transition effect of 0.5s to all properties. When hovered over, the code makes the ::before pseudo-element’s width change to 100% creating a fill text effect.
Main Parts:
- The
body
element is set to have no margin, be displayed as a flex container, and have its children aligned and centered both horizontally and vertically. It also sets the font-family of the page. - The
h1
element is set to have no margin or padding, a font-size of 120px, text-transform set to uppercase, position set to relative, and a color of #ccc. - The
h1::before
element is set to have the content of “codehack”, be positioned absolutely, have a color of #262626, a width of 0%, and overflow set to hidden. The transition property of all elements is use to 0.5s - The
h1:hover::before
element is set to have a width of 100%. This causes the “codehack” text to fill in when hovered over.
Summary:
This code creates a webpage with a “Fill Text Effect” on the “codehack” header using HTML and CSS. The webpage is center and has a minimum height of 100vh with a specific font-family. The h1 element has styles applied to increase font-size, change text to uppercase, and change color. A ::before pseudo-element is use to create the “Fill Text Effect” on hover, with a smooth transition.