Skip to content
Related Articles

Related Articles

How to create an accordion hover effect with box-shadows in CSS ?
  • Last Updated : 22 Mar, 2021

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-redius color

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 effected red shadow.

  • Before Click: We see the following web page.
  • After Click: You see the content for  the “GeeksForGeeks” accordion.



My Personal Notes arrow_drop_up
Recommended Articles
Page :