Как при наведении на один объект запустить анимацию у другого объекта?

Question

[Rodge]

Как при наведении на один объект запустить анимацию у другого объекта, или же подскажите другие способы решения такой проблемы. При наведении на обьект с верху и с низу должны заезжать 2 блока с текстом.
Код HTML:

<div class="our-events-item">
	<div class="our-events-img our-events-img-1"></div>
	<div class="mask-events">
		<div class="events-intext-up">
			<h4>Event Heading</h4>
			<h6>March, 12, 2017</h6>
		</div>
		<div class="events-intext-down">
			<div class="horisontal-line-left"></div>
			<h5 class="pre-h5">Lorem Ipsum is simply dummy text printing and typesetting industry.
			Lorem Ipsum has been the industry's </h5>
		</div>
	</div>
</div>

events-intext-up - верхний блок
events-intext-down - нижний блок
Стили:

.our-events-item {
	outline: none;
	max-width: 300px;
	overflow: hidden;
	margin: 10px 25px 25px 25px;
	position: relative;
}

.events-intext-up {
	position: absolute;
	top: -50px;
	left: 30px;
}

.events-intext-down {
	width: 82%;
	position: absolute;
	bottom: -140px;
	left: 30px;
}

Текст сам на абсолютной позиции поставлен вне блока, и его не видно, при overflow: hidden;
Как сделать правильно, что-бы текст заезжал на картинку с делеем 0.3s да-бы дать затемниться маске?

Answer 1

[Сергей Сергей]

Картинку и два текстовых блока внутри одного контейнера-блока, а на контейнере стиль на ::hover, в котором внутренние тексты сомкнуты над изображением. Анимация через transition.

https://jsfiddle.net/8y7rvho8/

Comments

[Rodge]

Не совсем понял что делать, не мог ли бы вы показать кодом, и да картинка сделана фоновым изображением.

[Сергей Сергей]

Dima Chemerys: все по ссылке https://jsfiddle.net/8y7rvho8/

[Rodge]

Сергей Сергей: спасибо огромное, понял.