Accordion slider with background animation

Hello guys in this tutorial we will create Accordion slider with background animation using Html CSS & Javascript

First we need to create two files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Accordion Slider</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Serif:wght@300;400&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="items">
    <div class="item">
      <div class="photo"><img alt="photo 1" class="background-photo" src="01.jpg"></div>
      <div class="title">
        <h3 class="main-title">Heading</h3>
        <h4 class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>
    </div>
    <div class="item">
      <div class="photo"><img alt="Photo 2" class="background-photo" src="02.jpg"></div>
      <div class="title">
        <h3 class="main-title">Heading</h3>
        <h4 class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>
    </div>
    <div class="item">
      <div class="photo"><img alt="Photo 3" class="background-photo" src="03.jpg"></div>
      <div class="title">
        <h3 class="main-title">Heading</h3>
        <h4 class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>
    </div>
    <div class="item">
      <div class="photo"><img alt="Photo 4" class="background-photo" src="04.jpg"></div>
      <div class="title">
        <h3 class="main-title">Heading</h3>
        <h4 class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>
    </div>
    <div class="item">
      <div class="photo"><img alt="Photo 5" class="background-photo" src="05.jpg"></div>
      <div class="title">
        <h3 class="main-title">Heading</h3>
        <h4 class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>
    </div>
    <div class="item">
      <div class="photo"><img alt="Photo 6" class="background-photo" src="06.jpg"></div>
      <div class="title">
        <h3 class="main-title">Heading</h3>
        <h4 class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>
    </div>

  </div>

<script type="text/javascript">
jQuery(".item").hover(function(){
  var src =  jQuery(this).children().first().children().attr("src");  
  jQuery("body").css("background","url("+src+")");
  jQuery("body").addClass("active");
});
</script>
</body>
</html>

Step:2

Then we need to add code for style.css which code i provide in below screen.

* {
  margin: 0;
  padding: 0;
  font-family: 'IBM Plex Sans', serif;
}
body.active {
  background-size: cover !important;
  background-position: 100% 100% !important;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url("01.jpg") no-repeat center center/cover;
  transition: background 0.5s linear;
}
.items {
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
    max-height: 300px;
    width: 95%;
    max-width: 1440px;
}
.item {
  flex: 0 0 12%;
  position: relative;
  overflow: hidden;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.20), -1px -1px 2px rgba(0, 0, 0, 0.20);
  transition: 0.5s;
}
.photo {
  height: 100%;
  width: 100%;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: blur(1px);
  transition: 0.5s;
}
.title {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 20;
  padding: 1rem;
}
.main-title {
  color: aliceblue;
  text-transform: uppercase;
  text-shadow: 1px 1px 5px rgba(45, 44, 44, 0.70),
    -1px 2px 1px rgba(50, 50, 50, 0.8);
  transform-origin: top left;
  transition: 0.5s;
}
.subtitle {
  position: absolute;
  bottom: 3rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  padding-right: 1rem;
  color: aliceblue;
  text-shadow: 1px 1px 5px black;
  opacity: 0;
  transform: scale(0) translateY(2rem);
  transition: transform 0.1s 0.2s, opacity 0.1s 0.4s;
}
.item:hover {
  flex: 1;
}
.item:hover .main-title {
  transform: scale(2);
}
.item:hover .subtitle {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.item:hover img {
  filter: blur(0);
}

Output:

Table of Contents

Leave a Comment