Как сделать, что-бы появившийся блок двигал соседние?

Question

Nikita solodovnikov @nsprod

HTML
CSS

Как сделать, что-бы появившийся блок двигал соседние?

Привет всем, помогите пожалуйста решить проблему.
Нужно что-бы появившийся блок двигал соседние.

Скриншот - joxi.ru/1A5558QsndjvBA.jpg

Этот блок с текстом появляется при ховере.

<div class="live_drop">
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>
					<div class="drop" style="background: url(img/drop.png) no-repeat center;">
						<div class="info_drop">
							afghrsddfgsdfghs
						</div>
					</div>

				</div>

.drop {
	margin: 0 28px 0 0; 
	height: 45px;
	width: 65px;
	border-radius: 6px;
	cursor: pointer;
	z-index: 1;
	display: inline-block;'
	position: relative;
}

.drop:last-child {
	margin: 0 0px 0 0; 
}

.live_drop {
	width: 100%;
	margin-top: 30px; 
	height: 70px;
	overflow: hidden;
	align-items: center;
	border: solid red 1px;
	display: flex;
	justify-content: center;
}

.info_drop {
	top: -8px;
	height: 60px;
	width: 175px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 20;
	border: solid red 1px; 
	display: none;
}

.drop:hover > .info_drop {
	display: block;
}