css hover

CSS hover is when you move your mouse over an element or part of a website. So there appear some hover effects, it is called CSS hover. With CSS hover you can perform many operations simultaneously. Let’s know what you can do with CSS hover effects.

  • You can change the image on hover CSS
  • You can change color on hover
  • CSS zoom on hover
  • CSS show text on hover
  • Change Text Color on hover
  • Change background color on hover
  • Resize text size on hover
  • CSS button hover color
  • Dropdown menus on the hover

CSS Hover Syntax

Let know about the syntax of all hover effects, how you can use it.

  • If you want to give a hover effect to one of your headlines, then you can use the code given below.
h1:hover {
	background-color: red;
	cursor: pointer;
}

h2:hover {
	color: blue;
	font-size:20px;
}
  • If you want to highlight one of your anchor links, then you can use this syntax for that.
a:hover {
   background-color: #000;
   color: #fff;
   cursor: pointer;
 }
  • If you want to give a hover effect to your entire section then it will be the syntax for that.
div:hover {
    background-color: green;
    border:2px solid #000;
    padding: 20px;
 }
  • If you have the text and want to give a hover effect to your paragraph or text summary then it will be the syntax for that.
p:hover {
    font-size:30px;
    color:pink;
    padding:30px; 
}
p:hover {
    text-decoration: underline;
    font-weight:800; 
    margin:30px;
 }
  • With CSS hover effects you can make your button more professional.
button:hover {
    border-radius:30px;
    font-size:30px;
    background-color:red;
 }
  • This will be the way to give the CSS hover effect to the image.
img:hover {
    border-radius:50%;
    box-shadow: 10px 10px 5px grey;
 }
  • The example below will affect your image, paragraph, and headline.
img:hover, p:hover, h1:hover {
    box-shadow: 10px 10px 5px grey;
 }
  • If you want to use class, for example, my class name is demo. Then you can use this syntax for that.
.demo:hover {
   font-size: 20px;
   color: red;
 }

We used all the above CSS hover examples first and then brought them to you. You can use any of these CSS hover effects for your website.

Related: 4 Easiest Ways To Apply CSS Padding