Having trouble transitioning width and height.

Question

Hey Guys,

I am having trouble transitioning the width and height of an image. Whenever I add the second class to transition the height and width it jumps to the next width and height without transitioning the properties. Any help is appreciated. Thanks in advance for any help!

Heres the code:
HTML:
This is dynamically created using JS.
<div><img src="Some String"></div>

CSS
.lightbox-img {
width: 100%;
}

.light-box-small {
width: 20vw;
height: 10vh;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: width 1s ease-in;
transition: height 1s ease-in;
}

.lightbox-container {
width: 60vw;
height: 30vh;
}

JS
const images = document.querySelectorAll('.img');
const backdrop = document.querySelector('.backdrop');
const lightboxImg = document.createElement('img');
const container = document.createElement('div');

images.forEach(image => {
image.addEventListener('click', () => {
lightboxImg.src = image.src;
container.appendChild(lightboxImg);
container.classList.add('light-box-small');
lightboxImg.classList.add('lightbox-img');
backdrop.classList.add('dim');
document.body.appendChild(container);

setTimeout(() => {
container.classList.add('lightbox-container');
}, 500);
});
});

Answer 1

The same selector overide the previous selector in css. So transition: height 1s overide transition: width 1s.

Use

transition: width 1s ease-in, height 1s ease-in;

or

transition: all 1s ease-in

instead

And also add css prefixer -webkit-transition for all browsers compatibilities

PS always post your code from Code Playground for easier checking and collaborate.

Answer 2

Thanks Calvin! I will be sure to add the code from the playground next time.