CSS transform close up effect

tebrown
April 24, 2023
267 views
0 votes
2 Answers

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

Answers

- Ariel
- April 24, 2023 at 7:10 am
- 0 votes
0
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.

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.

Please signup or login to give your own answer.

Click here to cancel reply.