Open In App

How to create an accordion hover effect with box-shadows in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

The purpose of this article is to use box shadows for creating an accordion hover effect.

Approach: The CSS box-shadow property is used to draw shadows around an element. CSS box-shadow property has the following syntax.

Syntax:

box-shadow : x-offset y-offset blur-radius spread-radius color

Example 1: 

HTML




<!DOCTYPE html>
<html>
<body style="text-align: center;">
    <style>
        .info {
            position: relative;
            max-width: 100%;
            font-size: 60px;
        }
 
        .info label,
        .info-content {
            padding: 10px;
            display: block;
        }
 
        .info label {
            background: #808080;
        }
 
        .info-content {
            background: #ffffff;
            display: none;
        }
 
        .info input {
            display: none;
        }
 
        .info input:checked~.info-content {
            display: block;
            border: solid;
        }
 
        .info label:hover {
            box-shadow: inset 0 0 10px red;
        }
    </style>
    <div class="info">
        Hover mouse over this accordion to see box-shadow
        in action. After that click on accordion to show
        its content.
        <input id="info1" type="checkbox" />
        <label for="info1">Geeks For Geeks</label>
        <div class="info-content">
            A Computer Science portal for geeks. It contains
            well written, well thought and well explained
            computer science and
            programming articles, quizzes
            and videos.
        </div>
    </div>
</body>
</html>


Output:  You can see the hover-affected red shadow.

How to create an accordion hover effect with box-shadows in CSS ?

How to create an accordion hover effect with box-shadows in CSS ?

Example 2:  So in this example, we will just show How to create an accordion hover effect with box shadows using the HTML and CSS code. so here we used a heading tag and div element to create the web interface.

Syntax: 

.accordion-section:hover {
    box-shadow: x-offset y-offset blur-radius rgba();
}

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .accordion {
            background-color: #f5cdcdbd;
            padding: 40px;
        }
 
        .accordion-section {
            border: 1px solid #ddd;
            background-color: #c7ff90;
            padding: 20px;
            margin-bottom: 30px;
            width: 300px;
            box-shadow: 0 0 10px rgba(21, 0, 128, 0.1);
            transition: box-shadow 0.3s ease;
        }
 
        .accordion-section:hover {
            box-shadow: 20px -20px 20px rgb(10, 55, 255);
        }
        
        .accordion-header {
            cursor: pointer;
        }
 
        .accordion-content {
           font-family: 'Times New Roman', Times, serif;
        }
 
        .accordion-section.active .accordion-content {
            display: block;
        }
    </style>
</head>
 
<body>
    <div class="accordion">
        <h1 style="color: green;">GeeksforGeeks !</h1>
        <div class="accordion-section">
            <div class="accordion-header">
                 GeeksforGeeks !
            </div>
            <div class="accordion-content">
                Hover effect with box-shadows
            </div>
        </div>
        <div class="accordion-section">
            <div class="accordion-header">
               GeeksforGeeks
            </div>
            <div class="accordion-content">
                Hover effect with box-shadows
            </div>
        </div>
    </div>
</body>
</html>


Description:  The “.accordion-section:hover” class sets the box-shadow to 20px with a green color and a negative offset to give a diagonal shadow effect. and HTML code contains a title tag, a header tag with the title “GeeksforGeeks”, and two accordion sections with headers and contents.

Output : 

How to create an accordion hover effect with box-shadows in CSS ?

How to create an accordion hover effect with box-shadows in CSS ?



Last Updated : 15 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads