Div visible on hover using HTML and CSS
Posted on Feb. 5, 2021, 8 p.m. by Bishal ( 2993)
In this blog of Code With Bishal, I am going to show you how can you create a Div hover effect using CSS. So, stay with me till the end and you will get all the downloadable resources.
So, What actually is a Div animation?
HTML <div></div> tag defines a division in a HTML file. The <div></div> tag can be used with class="" and id="" attribute to style (using CSS or JavaScript) and add functionalities (using JavaScript). Usually, it is used as a container in a HTML document. Any HTML elements can be wrapped inside a <div></div>. The HTML <div></div> is also used to make a webpage responsive by wrapping an element. In this blog I am going to create a simple CSS text visible on Hover effect using HTML and CSS.
In HTML, <div></div> is a block-level element. That is, it always starts on a new line. For example, :
div{
display: block;
}
How can I try the code before downloading the resources?
You can try and customize the code using the try now button below or keep reading you will find a demo in this page.
Demo hover effect:
Hover over me
Here is the text that is only visible on hover
Step by step guide for creating, Div Text visible on hover:
-
Create a file with the name
index.html -
Open
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Text visible on hover - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
-
Create a file
style.css -
Link External CSS with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<link rel="stylesheet" href="style.css">
Now add some style to your button:
Add these code to the style.css file
.visible{
font-size: 30px;
background: transparent;
text-align: center;
color: red;
}
.hidden{
border: 1px solid #ccc;
display: none;
font-size: 25px;
margin-top: 20px;
padding: 5px;
text-transform: uppercase;
}
.visible:hover .hidden{
display: block;
}
Source Code
1) HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Text visible on hover by Code With Bishal</title>
</head>
<body>
<!-- by Code With Bishal - www.codewithbishal.com -->
<div class="visible">
<p> Hover over me </p>
<span class="hidden">
Here is the text that is only visible on hover
</span>
</div>
</body>
</html>
2) CSS Code:
.visible{
font-size: 30px;
background: transparent;
text-align: center;
color: red;
}
.hidden{
border: 1px solid #ccc;
display: none;
font-size: 25px;
margin-top: 20px;
padding: 5px;
text-transform: uppercase;
}
.visible:hover .hidden{
display: block;
}