Div visible on hover using HTML and CSS


Posted on Feb. 5, 2021, 8 p.m. by Bishal     (  2498)


Card Thumbnail
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.

 

DigitalOcean Referral Badge

 

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

 

DigitalOcean Referral Badge

 

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

 

DigitalOcean Referral Badge

 

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;
}

 

DigitalOcean Referral Badge

 

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>

 

DigitalOcean Referral Badge

 

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;
}

 

DigitalOcean Referral Badge

 





Leave a Comment:
No comments Found. Be the First one to comment