skip to Main Content

I’m building a slide using Swiper and need some help styling the active slide. Currently, the slides are set at a scale of .75, and the active slide is set at 1, resulting in a close-up effect. However, I am facing difficulty in adjusting the overlay to match the image object’s growth. Is there a more efficient way to accomplish this without applying the same scale transformation to the overlay div?

Additionally, I would like to make sure that the scale transformation has no impact on the text under any circumstances, if possible.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://picsum.photos/600/900?image=10" alt="dummy-image">
      <div class="overlay">
          <div class="year">1906</div>
          <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida. 
      </div>
    </div>
    ... more slides
  </div>
</div>

.swiper-container {
  align-items: center;
}

.swiper-slide {
  transition: all .25s ease-out;
  opacity: 1;
}

.swiper-slide-active + .swiper-slide ~ .swiper-slide {
  opacity: .35;
}

.swiper-slide img {
  max-width: 100%;
  transition: all .25s ease-out;
  transform: scale(.75);
  transform-origin: center;
}

.swiper-slide-active img {
  transform: scale(1);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: scale(.75); 
    transform-origin: center;
  }

  .text {
    display: none;
    text-align: center;
    padding: 0 15px;
  }

  .swiper-slide-active .text {
    display: block;
  }

https://codepen.io/tebrown/pen/dygNxJo

2

Answers


  1. You could do it by moving the dark background to a ::after element.

    Before:

    .overlay {
      background-color: rgba(0, 0, 0, 0.5);
    }
    

    After:

    .overlay::after {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      transform: scale(.75);  
      transition: transform .25s ease-out;
    }
    .swiper-slide-active .overlay::after {
      transform: scale(1);  
    }
    

    Use z-index: -1 to display this below the text.

    Also, as a suggestion, instead of showing the text by toggling the display attribute, you could toggle the opacity, then the title position don’t change.

    Here’s your provided code with the above changes https://codepen.io/bortao/pen/YzJZPMp


    Edit: After input from OP he just wanted to darken the image, which can be obtained by css:

    filter: brightness(50%);
    
    Login or Signup to reply.
  2. It may help you.

    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 5,
      centeredSlides: true,
      loop: true,
      spaceBetween: 0,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    body {
      font-size: 20px;
    }
    
    .swiper-container {
      border: 1px solid red;
      align-items: center;
    }
    
    .swiper-slide {
      transition: all .25s ease-out;
      opacity: 1;
    }
    
    .swiper-slide-active+.swiper-slide~.swiper-slide {
      opacity: .35;
    }
    
    .swiper-slide img {
      max-width: 100%;
      transition: all .25s ease-out;
      transform: scale(.75);
      transform-origin: center;
    }
    
    .swiper-slide img::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(120deg, #eaee44, #33d0ff);
      opacity: .7;
    }
    
    .swiper-slide-active img {
      transform: scale(1);
    }
    
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transform: scale(.75);
      transform-origin: center;
    }
    
    .overlay::after {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transform-origin: center;
      transform: scale(.75);
      transition: all .25s ease-out;
    }
    
    .swiper-slide-active .overlay::after {
      transform: scale(1);
    }
    
    .text {
      opacity: 0;
      text-align: center;
      padding: 0 15px;
      transition: all .25s ease-out;
    }
    
    .swiper-slide-active .text {
      opacity: 1;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.2.4/swiper-bundle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.2.4/swiper-bundle.min.js"></script>
    
    
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=10" alt="dummy-image">
          <div class="overlay">
            <div class="year">1906</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=11" alt="dummy-image">
          <div class="overlay">
            <div class="year">1908</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=12" alt="dummy-image">
          <div class="overlay">
            <div class="year">1920</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=13" alt="dummy-image">
          <div class="overlay">
            <div class="year">1945</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=14" alt="dummy-image">
          <div class="overlay">
            <div class="year">1967</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=15" alt="dummy-image">
          <div class="overlay">
            <div class="year">1990</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=16" alt="dummy-image">
          <div class="overlay">
            <div class="year">2001</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=17" alt="dummy-image">
          <div class="overlay">
            <div class="year">2004</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=18" alt="dummy-image">
          <div class="overlay">
            <div class="year">2008</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=19" alt="dummy-image">
          <div class="overlay">
            <div class="year">2012</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/600/900?image=20" alt="dummy-image">
          <div class="overlay">
            <div class="year">2020</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet gravida ligula. Praesent vel urna sit amet enim hendrerit gravida.</div>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

    You also have the option of animating the max-height, but in order to do so, you will need to know the maximum value.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search