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;
}
2
Answers
You could do it by moving the dark background to a
::after
element.Before:
After:
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 theopacity
, 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:
It may help you.
You also have the option of animating the max-height, but in order to do so, you will need to know the maximum value.