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>




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 :- 


What does hover effect does: Hover effect makes an hyperlink more user friendly for the users. It makes the whole div, paragraph, table etc link able. Now what are the CSS we can apply in it we can change the color of the background of the div, table etc using the CSS code background-color:red; and the color of the text as color:green; now we can make the appearing text bolder using CSS code 
font-weight:bold; so this are the simple CSS code we can use for decorating purpose.

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>



Advertisement

Translate