CSS - Hover Effects

Previous
Quiz
Next

CSS hover effects are used to make interactive elements such as buttons and links more interactive. The :hover pseudo-class in CSS is used to target an element when the user hovers over it with the mouse cursor. Its purpose is to apply styles to improve the user experience.

The :hover property can be used in various scenarios such as to change the button color when we hover it, adjust the size of div boxes, or show the hidden content.

Hover over me!

What is Hover Pseudo-Class?

  • In CSS, the pseudo-class :hover is a type of selector used to target and style an element when a user moves the mouse pointer over the element.
  • Hover effects are mostly used with interactive elements like buttons, links, etc to provide the user with a dynamic experience.
  • Hover effects are useful to add a dynamic and engaging look to a website.

Background Change on Hover CSS

You can use the :hover property to change the background of any element by hovering over it.

Example

In this example, we have used the background-color property with :hover pseudo class to change the background color of the div container when hovered over it.

<!DOCTYPE html>
<html>

<head>
    <style>
        .main{
            display: flex;
            justify-content: space-around;
        }
        .container{
            width: 40%; 
            height: 100px; 
            background-color: #D5E8D4; 
            border: 2px solid black; 
            padding: 10px;
            justify-content: center;
            align-items: center;
            display: flex;
        }
        .container:hover{
            background-color: #33FF33;
        }

    </style>
</head>

<body>
   <h2>CSS :hover pseudo class</h2>
   <div class="main">
      <div class="container"> Hover over me! </div>
   </div>
</body>

</html>

Display Hidden Text with CSS hover

To display any hidden text or content with CSS, you can use the :hover pseudo-class. Here is an example to display the hidden text on hover.

Example

In this example, we have used the opacity property with the :hover pseudo-class to display the hidden text upon hovering over the div element.

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 30px;
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
            font-weight: bold;
            border: 2px solid #04af2f;
            border-radius: 10px;
            text-align: center;
            line-height: 30px;            
        }
        .hide {
            opacity: 0;   
            transition: opacity 0.3s;         
        }
        .container:hover .hide {
            opacity: 1;
        }
    </style>
</head>
<body>
    <h2>CSS :hover pseudo-class</h2>
    <p><strong>Hover over the box below to reveal the hidden message inside.</strong></p>
    <div class="container">
        <div class="hide">April Fool :)</div>
    </div>
</body>
</html>

CSS Button Scale Effect on Hover

You can style a button by hovering over it to make the web page more interactive. You can add transformation properties, transition, animation, and many more to a button while hovering over it.

Example

In this example, we have used the text-transform property to the button that scales the size of the button using the scale() function on hovering over it.

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #ffffff;
            color: #228B22;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: transform 0.3s;
        }
        button:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
      <h2>CSS :hover pseudo class</h2>
      <button>Hover over me!</button>
</body>
</html>

CSS Border with Hover Effect

To set a border with the hover effect, we use the border property with :hover property. You can set the border properties such as color, width, style, and radius of the border.

Example

In this example, we have added a border to the div element when we hover the div element.

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: fit-content;
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
            font-weight: bold;
            transition: border 0.1s, border-radius 0.1s;
        }
        div:hover {
            border: 2px solid #228B22;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <h2>CSS :hover pseudo class</h2>
    <div> Hover me!!! </div>
</body>
</html>

CSS hover Effect with Box Shadow

You can add shadow to any HTML element when hovering over that element. Here is an example of adding a shadow to the div element.

Example

The following example uses the box-shadow property with :hover property to add a shadow to the div box when we hover over it.

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: fit-content;
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
            font-weight: bold;
            transition: box-shadow 0.1s;
            border: 2px solid #228B22;
            border-radius: 10px;
        }
        div:hover {
            box-shadow: 20px 20px 10px grey;
        }
    </style>
</head>
<body>
    <h2>CSS :hover pseudo class</h2>
    <div> Hover me!!! </div>
</body>
</html>

CSS Glow Effect on Hover

You can add glowing effects to HTML elements using CSS properties such as linear-gradient, background-color, animation, and many more. Here is an example of how you can add the glowing effect to a button.

Example

In this example, we have used the linear-gradient function with :hover property to add a glowing effect to the button when we hover over it.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 300px;
            overflow: hidden;
            display: grid;
            justify-content: center;
            align-items: center;
        }

        .glow {
            padding: 10px;
            width: 250px;
            height: 50px;
            border: none;
            outline: none;
            color: #fff;
            background: #111;
            cursor: pointer;
            position: relative;
            z-index: 0;
            border-radius: 20px;
        }

        .glow:before {
            content: '';
            background: linear-gradient(60deg, #ff0000, #ff7300, 
                                #fffb00, #48ff00, #00ffd5, #002bff, 
                                #7a00ff, #ff00c8, #ff0000);
            position: absolute;
            top: -4px;
            left:-4px;
            background-size: 400%;
            z-index: -1;
            filter: blur(15px);
            width: calc(100% + 6px);
            height: calc(100% + 6px);
            animation: glowing 20s linear infinite;
            opacity: 0;
            transition: opacity .3s ease-in-out;
            border-radius: 10px;
        }

        .glow:active {
            color: rgb(246, 235, 235)
        }

        .glow:active:after {
            background: transparent;
        }

        .glow:hover:before {
            opacity: 1;
        }

        .glow:after {
            z-index: -1;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #111;
            left: 0;
            top: 0;
            border-radius: 10px;
        }

        @keyframes glowing {
            0% { 
                background-position: 0 0; 
            }
            50% { 
                background-position: 400% 0; 
            }
            100% { 
                background-position: 0 0; 
            }
        }
    </style>
</head>

<body>
    <button class="glow" type="button">
        HOVER OVER & CLICK!
    </button>
</body>
</html>
Print Page
Previous
Next
Advertisements