Check Teer Result

How to create a hover effect on a div with opacity

Create a hover effect on a div with opacity




How to give a effect on a div on hover :
  1. The font-family, font-size can be changed on hover of mouse
  2. The background color of the paragraph or div can be changed
  3. The text color can be changed
  4. We need just notepad or notepad ++
  5. basic coding knowledge of HTML and CSS
Nowadays CSS has changed the front-end of any website to a great extent. We use css to modify the design of any div, paragraph or any HTML tag.
So now we are going to discuss what is hover effect and can we do with it -
The change of design of any paragraph or div on hover (when we point our mouse to the particular div or paragraph)
What are the material required to do this -
Now we will privide you source code, video tutorials and live demo of the project below -


<!DOCTYPE html>
<html>
  <title>
  <head>
    Create a Hover effect on a div with opacity
  </title>
 </head>
<body>   <style>
     #linkhits{ 
     width:100%;
     font-family:Tahoma;
     font-size:18px;
     margin-top:3%;
}
   .leftlink{
   background-color:#3498db;
   color:#fff;
   padding:8px;
   width:40%;
   float:left;
   text-align:center;
   border-radius:8px;
}
  .leftlink:hover{
   opacity: 0.7;
}
   .rightlink{
   background-color:#3498db;
   color:#fff;
   padding:8px;
   width:40%;
   float:right;
   text-align:center;
   border-radius:8px;
}
   .rightlink:hover{
   opacity: 0.7;
}
</style>
</head>
<body>
 <div id='linkhits'>
<a href='#'>
          <div class='leftlink'> &#8592; Codework  &#x2192;</div>
          </a>
<a href='#'><div class='rightlink'> &#8592; Codework  &#x2192;                </div>
         </a>
     <div style='clear:both;'></div>
</div>

<div id='linkhits'>
<a href='#'>
       <div class='leftlink'> &#8592;  Codework  &#x2192;
       </div></a>
<a href='#a'>
      <div class='rightlink'> &#8592; Codework  &#x2192; </div>
      </a>
<div style='clear:both;'></div>
</div>

<div id='linkhits'>
<a href='#'><div class='leftlink'> &#8592; Codework  &#x2192;</div></a>
<a href='#'><div class='rightlink'> &#8592; Codework  &#x2192; </div>              </a>
<div style='clear:both;'></div>
</div>

</div>
</body>

</html>




Let us create hover effect on other elements of HTML like paragraph


  1. Above we have learn how to create hover effect on div using CSS
  2. Now we will learn to create hover effect on a paragraph
  3. we have name the class of the paragraph as "hoveronparagraph"
  4. You may run the below code on your notepad to see the changing effect
  5. See the source code here -
This is the screen shot we have taken for you before creating the hover effect on a paragraph :- 


Now This is the shot we have taken after creating the hover effect on a paragraph

Here is the source code for the hover effect on a paragraph

<!DOCTYPE html>

<html>
<head>
<style>
 .hoveronparagraph{
   width:30%;
height:300px;
background-color:green;
padding:4%;
color:white;
font-family:Tahoma;
font-size:25px;
 }
 
 .hoveronparagraph:hover{
 background-color:grey;
 color:yellow;
 }
</style>
</head>
<body>
  <p class="hoveronparagraph"> hello its just a paragraph with a background color</p>
</body>
</html>





EmoticonEmoticon