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
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" >Beginner For Beginner</ label > < div class = "info-content" > A Computer Science portal for Beginner. 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.
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;" >w3wiki !</ h1 > < div class = "accordion-section" > < div class = "accordion-header" > w3wiki ! </ div > < div class = "accordion-content" > Hover effect with box-shadows </ div > </ div > < div class = "accordion-section" > < div class = "accordion-header" > w3wiki </ 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 “w3wiki”, and two accordion sections with headers and contents.
Output :
Contact Us