Responsive Accordion Slider

Written by @kerixa 24 May 2020

Accordion is a beautiful effect due to its nature of dependability. In this example various images have been encapsulated in an accordion. When they are hovered, they are expanded and become larger and colorful. This slider is responsive and fits itself to its patents' border.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
body {
  margin: 0;
  min-height: 100vh;
  background: #000;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10vmin;
  overflow: hidden;
  transform: skew(5deg);
}
.container .card {
  flex: 1;
  transition: all 1s ease-in-out;
  height: 75vmin;
  position: relative;
}
.container .card .card__head {
  color: black;
  background: rgba(255, 30, 173, 0.75);
  padding: 0.5em;
  transform: rotate(-90deg);
  transform-origin: 0% 0%;
  transition: all 0.5s ease-in-out;
  min-width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1em;
  white-space: nowrap;
}
.container .card:hover {
  flex-grow: 10;
}
.container .card:hover img {
  filter: grayscale(0);
}
.container .card:hover .card__head {
  text-align: center;
  top: calc(100% - 2em);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  font-size: 2em;
  transform: rotate(0deg) skew(-5deg);
}
.container .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease-in-out;
  filter: grayscale(100%);
}
.container .card:not(:nth-child(5)) {
  margin-right: 1em;
}
</style>

<div class="container">
<div class="card">
<img src="https://www.htmlbestcodes.com/files/18-Cat_plotting_something_evil%21.jpg">
<div class="card__head">Plotting Cat</div>
</div>
<div class="card">
<img src="https://www.htmlbestcodes.com/files/18-1280px-False_alarm_-a.jpg">
<div class="card__head">Angry Cat</div>
</div>
<div class="card">
<img src="https://www.htmlbestcodes.com/files/18-1280px-Neugierige-Katze.jpg">
<div class="card__head">Curious Cat</div>
</div>
<div class="card">
<img src="https://www.htmlbestcodes.com/files/18-1280px-Al_acecho_%289272124788%29.jpg">
<div class="card__head">Prowling Cat</div>
</div>
<div class="card">
<img src="https://www.htmlbestcodes.com/files/18-1280px-Mimi%26Tigsi.jpg">
<div class="card__head">Sleepy Cat</div>
</div>
</div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300