Как задать анимацию двум дочерним элементам?

Question

[Pavel Pavel]

<div class="img-wrapper">
   <img src="img/1.jpg" alt="">
 </div>

.img-wrapper
	position: relative
	margin: 50px auto
	width: 250px
	height: 450px
	border: 2px solid brown
	overflow: hidden
	img
		width: 100%
		height: 100%
		object-fit: cover
		transition: .2s all
	&:hover
		&::before
			background-color: transparentize(black, 1)
		img
			transform: scale(1.05)
	&::before
		content: ''
		position: absolute
		width: 100%
		height: 100%
		background-color: transparentize(black, 0.5)
		transition: .2s all

При задании transition элементам img и before, анимация срабатывает только на img, а ::before срабатывает мгновенно, и по окончанию анимации у img так же мгновенно возвращается в исходное состояние. Как сделать так, чтобы при наведении срабатывали анимации двух объектов?

Answer 1

[Владимир]

https://codepen.io/casufi/pen/QWwxKGE

Comments

[Pavel Pavel]

А, т.е. надо было задавать transform контейнеру изображения а не ему, тогда и анимации не "конфликтовали" бы. Спаибо.