.bc-img-reveal {
contain: paint;
display: block;
width: fit-content; 
height: auto;
}
.bc-img-reveal__element {
visibility: hidden;
overflow: hidden;
width: 100%;
height: 100%;
--scale: 1.3;
}
.bc-img-reveal__element[data-direction='top'] {
transform: translateY(-100%);
}
.bc-img-reveal__element[data-direction='bottom'] {
transform: translateY(100%);
}
.bc-img-reveal__element[data-direction='left'] {
transform: translateX(-100%);
}
.bc-img-reveal__element[data-direction='right'] {
transform: translateX(100%);
}
.bc-img-reveal__element .bc-img-reveal__img {
height: 100%;
width: 100%;
object-fit: cover;
transform-origin: left;
}
.bc-img-reveal__element[data-direction='top'] .bc-img-reveal__img {
transform: translateY(100%) scale(var(--scale));
}
.bc-img-reveal__element[data-direction='bottom'] .bc-img-reveal__img {
transform: translateY(-100%) scale(var(--scale));
}
.bc-img-reveal__element[data-direction='left'] .bc-img-reveal__img {
transform: translateX(100%) scale(var(--scale));
}
.bc-img-reveal__element[data-direction='right'] .bc-img-reveal__img {
transform: translateX(-100%) scale(var(--scale));
}