Css Hover

CSS Hover:

It is a property in CSS which help us to see different effect whenever we hover on something that is present on our website.
We can use it by specifying it for a particular target.
These targets can be a div, a id , button or anything present on the website.
If we are using the hover property then we can change the color, height, width, or we can apply transition on the page easily.

Genral Syntax

:hover{
  property: vaue;
}

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 20px;
            padding: 30px;
            background-color: black;
        }

        button {  
          background-color: #eaeaea;  
          color: #333333;  
          padding: 10px 20px;  
          border: none;  
          cursor: pointer;  
          transition: background-color 0.3s ease;  
        }  

        button:hover {  
          background-color: #ff0000;  
          color: #ffffff;  
        }  
    </style>
</head>
<body>
    <button>Subscribe me</button>
</body>
</html>

OUTPUT:

Before hovering the button

After hovering on the button

This is the example how we change the color on the button with the :hover property.
In the same way we can change all the property on the container using the hover property.

Similarly we will zoom effect on the image using hover

INPUT:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 20px;
            background-color: black;
            display: block;
        }

        img{
            cursor: grab;
        }

        img:hover{
            transform: scale(1.2);  
            transition-duration: 3s;
        }

        button {  
          background-color: #eaeaea;  
          color: #333333;  
          padding: 10px;  
          border: none;  
          cursor: pointer;  
          transition: background-color 0.3s ease;  
        }  

        button:hover {  
          background-color: #ff0000;  
          color: #ffffff;  
        }  
    </style>
</head>
<body>
    <img src="https://th.bing.com/th/id/OIP.PyjB-ELMBNI1QVQBDgIwuwAAAA?w=291&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="easy">
    <button>Subscribe me</button>
</body>
</html>

OUTPUT

Before hovering the image-

After hovering the image-

Here after i hover the image the size of image grew up.
It happened in duration of 3s.
Size increased because I have used the property of transform: scale(x);.
In this property we are saying our CSS to transform the image by using property.
Here we are saying it to scale up the size of image to 1.2 times of original.

This is how we have increased the size we can also reduce the size of the image.

INPUT

img{
    cursor: grab;
}
img:hover{
    transform: scale(0.8);  
    transition-duration: 3s;
}

OUTPUT
Before hovering the image-*