How To Make A Creative Banner Using Elementor Free

<style>

/*Banner Slider Item */
.b-slide .banner-slide-item {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  transition: 0.5s;
}

.b-slide .banner-slide-item:nth-child(1),
.b-slide .banner-slide-item:nth-child(2) {
  top: 0;
  right: 0;
  transform: translate(0, 0);
  border-radius: 0 !important;
  width: 100%;
  height: 100%;
}

.b-slide .banner-slide-item:nth-child(3) {
  right: calc(0% + 420px);
}
.b-slide .banner-slide-item:nth-child(4) {
      right: calc(0% + 180px);
}
.b-slide .banner-slide-item:nth-child(5) {
  right: calc(0% - 60px);
}

/* here n = 0, 1, 2, 3,... */
.b-slide .banner-slide-item:nth-child(n + 6) {
  right: calc(0% - 300px);
  opacity: 0;
}

 .banner-slide-item:nth-child(2) .content {
  display: flex;
  opacity: 0;
  animation: animate-fade-in 1s ease-in-out 0.3s 1 forwards;
}



.content {
    backdrop-filter: blur(10px);
}
.banner-slide-item .content {
  display: none;
  
}

@keyframes animate-fade-in {
  from {
    opacity: 0;
    transform: translate(0, 50px);
    filter: blur(33px);
  }

  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}





/* responsive */
@media (max-width:767.98px){
    .b-slide .banner-slide-item {
    width: 90px;
    height: 120px;
    top: calc(100% - 105px);
    transform: translate(0, -100%);
}

.b-slide .banner-slide-item:nth-child(4) {
    right: calc(0% + 40px);
}

.b-slide .banner-slide-item:nth-child(3) {
    right: calc(0% + 140px);
}


}

@media (min-width:768px) and (max-width:1024.98px){
    .b-slide .banner-slide-item {
    width: 130px;
    height: 160px;
}

.b-slide .banner-slide-item:nth-child(4) {
    right: calc(0% + 90px);
}

.b-slide .banner-slide-item:nth-child(3) {
    right: calc(0% + 240px);
}


}

@media (min-width: 1025px) and (max-width: 1349.98px){
    .b-slide .banner-slide-item {
    width: 165px;
    height: 225px;
}

.b-slide .banner-slide-item:nth-child(4) {
    right: calc(0% + 145px);
}
.b-slide .banner-slide-item:nth-child(3) {
    right: calc(0% + 350px);
}
}
</style>

/* For slider button */

.bslide-button .prev, .bslide-button .next{
    cursor: pointer;
}

.bslide-button .prev .elementor-button, .bslide-button .next .elementor-button{
    backdrop-filter: blur(8px);
}