DIV that is only visible on hover - Code With Bishal

Learn how to make a DIV that is only visible on hover with the help of HTML5 AND CSS.

This is a DIV only visible on hover Made With HTML and CSS By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website. To Preview scroll the page. If you are having any problem viewing the code just refresh the page, DIV only visible on hover is a lightweight and easy-to-use HTML AND CSS code that creates a "DIV only visible on hover" for you. In this blog [DIV only visible on hover], there are five sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can see the demo of the button made with HTML and CSS, to view the fourth section click on the "View Code" button to reveal the code after that you can copy the code and paste it [that's the fifth section]

You might like this :

ANIMATED BUTTON USING HTML AND CSS
Few days ago
Simple Button - Code With Bishal
Few days ago
DIV ANIMATION USING HTML AND CSS
Few days ago


This is a Demo :

Hover over me

here is your text that is visible only on hover

HTML Code

<!DOCTYPE html>
<html>
<title>span visible on hover by Code With Bishal</title>
<body>
/*by Code With Bishal - www.codewithbishal.com*/
<div class="id2">
<p> Hover over me </p>
<span class="id1">
here is your text that is visible only on hover
</span>
</div>
</body>
</html>
Copy Contents

CSS Code

.id2{
font-size: 30px;
background: transparent;
text-align: center;
color: red;
}

.id1{
border: 1px solid #ccc;
display: none;
font-size: 25px;
margin-top: 20px;
padding: 5px;
text-transform: uppercase;
}

.id2:hover .id1 {
display: block;
}

.id{
padding-top: 50px;
text-align: center;
}