How to create an accordion hover effect with box-shadows in CSS ?
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
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.
Please Login to comment...