In this tutorial we will show you the solution of css hover effects text, as we know css used to style html elements, here we used internal style method to show demo.
Hover means when move mouse over the particular html element some cool effects will happen as per we defined.
So we simply added shadow effect on text it will appear when we hover our text on webpage.
Step By Step Guide On CSS Hover Effects Text :-
We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.
In our program we defined <h1> tag with one sentence. Using css pseudo class ‘:hover’ we defined text shadow effect on ‘h1’ tag so when we hover on text ‘Text Hovering’ text shadow will appear.
<!DOCTYPE html>
<html>
<head>
<title>TEXT HOVER</title>
<style>
h1{
text-align: center;
}
h1:hover{
text-shadow: 2px 2px 4px #555;
}
</style>
</head>
<body>
<h1>Text Hovering</h1>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Within <style> tag we defined block of styles. Here we defined style property ‘text-align: center;’ to align h1 tag text to center of webpage.
- Below that we defined pseudo class ‘h1:hover’, it refers hover effect added on ‘h1’ tag. Within that we defined style property ‘text-shadow: 2px 2px 4px #555;’ used to sets shadow behind text.
- First two parameters of ‘2px’ refers right and bottom side shadow then ‘4px’ refers amount of blur effect finally ‘#555’ refers shadow color.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined <h1> tag with text ‘Text Hovering’ then it is styled by as we seen at point 4.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to create hover effect using css.
When we load our program we can see one text displayed on webpage at center of page.
When we moves mouse on that text text-shadow will appear around the text and we can also use any other effects on hover like color change, adding background color or make bold text..etc we will see them in later.
Using css try to explore more cool hover effects with your own thoughts.
I hope this tutorial on css hover effects text helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
