Html Code: Responsive Accordion Slider

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.

<!-- this script got from 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/uploads/other/18-Cat_plotting_something_evil%21.jpg">
<div class="card__head">Plotting Cat</div>
</div>
<div class="card">
<img src="https://www.htmlbestcodes.com/uploads/other/18-1280px-False_alarm_-a.jpg">
<div class="card__head">Angry Cat</div>
</div>
<div class="card">
<img src="https://www.htmlbestcodes.com/uploads/other/18-1280px-Neugierige-Katze.jpg">
<div class="card__head">Curious Cat</div>
</div>
<div class="card">
<img src="https://www.htmlbestcodes.com/uploads/other/18-1280px-Al_acecho_%289272124788%29.jpg">
<div class="card__head">Prowling Cat</div>
</div>
<div class="card">
<img src="https://www.htmlbestcodes.com/uploads/other/18-1280px-Mimi%26Tigsi.jpg">
<div class="card__head">Sleepy Cat</div>
</div>
</div><a target='_blank' href='http://www.htmlbestcodes.com/' style='font-size: 8pt; text-decoration: none'>HTML Codes</a>

If you don't know how to use this code or need more information Click here!

Html Best Codes

Html Code: Responsive Accordion Slider

Links