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" >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 ?
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 ?
Last Updated :
15 Mar, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...