.png)
3 years ago
181 BOOK THIS SPACE FOR AD
ARTICLE ADThis is one of the most beautiful JavaScript Horizontal Accordion examples. Three panels are given to you which is apart by a slanted line. As the name refers, this one has a hover effect. So as soon as you hover over any of the panes, the content shows up wonderfully.Also an amazing background is present which adds more beauty to the design.
.div1, .div2, .div3 {
width: 33.333%;
}
.widthlow{
width: 12%;
}
.widthmax{
width: 76%;
transition: width 1s;
}
.widthlow h2, .widthmax h2 {
opacity: 0;
}
.widthmax:hover .smoky {
opacity: 1;
-webkit-transition-property: opacity; /* Safari */
-webkit-transition-duration: 0.5s; /* Safari */
-webkit-transition-delay: 0.5s; /* Safari */
transition-property: opacity;
transition-duration: 0.5s;
transition-delay: 0.5s;
}
.accord-wrapper {
background-image: url(https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
overflow: hidden;
background-size: cover;
background-position: center center;
height: 400px;
}
.accord-wrapper > div {
float: left;
transition: width 0.5s ease-in-out;
-moz-transform: skew(-20deg, 0);
-ms-transform: skew(-20deg, 0);
-webkit-transform: skew(-20deg, 0);
transform: skew(-20deg, 0);
-moz-transform: skew(-20deg, 0deg);
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
padding-right: 1%;
background-color: transparent;
}
.accord-content {
color: #fff;
padding: 35px;
height: 400px;
display: flex;
align-items: center;
text-align: center;
}
.accord-content h2 {
color: #66a5ff;
font-style: normal;
-moz-transform: skew(20deg, 0);
-ms-transform: skew(20deg, 0);
-webkit-transform: skew(20deg, 0);
transform: skew(20deg, 0);
-moz-transform: skew(20deg, 0deg);
-ms-transform: skew(20deg, 0deg);
-webkit-transform: skew(20deg, 0deg);
max-width: 232px;
margin: 0 auto;
text-align: left;
font-family: "proxima-nova",sans-serif;
font-weight: 700;
font-size:28px;
-webkit-transition-property: opacity; /* Safari */
-webkit-transition-duration: 0.2s; /* Safari */
-webkit-transition-delay: 0.2s; /* Safari */
transition-property: opacity;
transition-duration: 0.2s;
transition-delay: 0.2s;
}
.accord-content h2 span {
color: #fff;
}
.div1 .accord-content {
position: relative;
z-index: 1;
}
.div1:before {
content: '';
position: absolute;
bottom: 0;
left: -74px;
height: 100%;
width: calc(100% + 60px);
background-color: rgba(7, 7, 79, 0.6);
}
.div2 .accord-content {
background: none;
position: relative;
z-index: 1;
}
.div2:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(7, 7, 79, 0.6);
}
.div3:after {
content: '';
position: absolute;
bottom: 0;
right: -74px;
height: 100%;
width: calc(100% + 60px);
background-color: rgba(7, 7, 79, 0.6);
}
.div3 .accord-content {
background: none;
position: relative;
z-index: 1;
}
.accord-content {
position: relative;
}
.accord-content .smoky {
-moz-transform: skew(20deg, 0deg) translateX(-50%);
-ms-transform: skew(20deg, 0deg) translateX(-50%);
-webkit-transform: skew(20deg, 0deg) translateX(-50%);
transform: skew(20deg, 0deg) translateX(-50%);
-moz-transform: skew(20deg, 0deg) translateX(-50%);
-ms-transform: skew(20deg, 0deg) translateX(-50%);
-webkit-transform: skew(20deg, 0deg) translateX(-50%);
font-family: "proxima-nova",sans-serif;
font-size: 22px;
position: absolute;
left: calc(50% + 60px);
width: 100%;
padding-right: 90px;
opacity: 0;
}
This awesome script developed by immad-hamid. Visit their official repository for more information and follow for future updates.
Bengali (Bangladesh) · 
English (United States) ·