Pu sh divs за кадром при наведении

Question

Я пытаюсь понять, как сделать анимацию, запрошенную моими дизайнерами. При загрузке страницы мне нужна обычная сетка, а затем, когда пользователь наводит курсор на каждый элемент, один элемент увеличивается, а остальные элементы в этом ряду выталкиваются за пределы экрана. Я пытался использовать различные типы макетов для достижения этой цели, но я не могу найти способ вывести sh содержимое за пределы экрана без горизонтальной прокрутки.

У меня нет разрешения на встраивание изображений пока нет, но вот состояние c 1 и hover 2 того, что мне нужно.

Это то, что я сделал до сих пор https://codepen.io/kierrapalmer/pen/ExVZVLN. Мой вопрос заключается в том, как получить div для go со страницы при наведении курсора вместо изменения размера.

.custom-flex-grid {
	 position: relative;
	 overflow-x: hidden;
}
.custom-flex-grid {
	 display: flex;
	 flex-wrap: nowrap;
	 margin-left: 8.3%;
}
.custom-flex-grid .custom-cell {
	 width: 16.6%;
	 margin-right: 8.3%;
	 margin-bottom: 90px;
}
.custom-flex-grid .custom-cell .description {
	 display: none;
	 position: relative;
	 top: -80px;
	 left: 180px;
	 width: 360px;
}

.custom-flex-grid .custom-cell:hover {
	 width: 90%;
}
.custom-flex-grid .custom-cell:hover .heading {
	 width: 180px;
}
 .custom-flex-grid .custom-cell:hover .description {
	 display: inherit;
}

<div class="custom-flex-grid">
      <div class="custom-cell">
        <h4 class="heading">Full Marketing & Sales Hub Implementation</h4>
        <div class="description">Bacon ipsum dolor sit amet salami jowl corned beef, andouille flank tongue ball tip kielbasa pastrami tri-tip meatloaf short loin beef biltong. Cow bresaola ground round strip steak fatback meatball shoulder leberkas pastrami sausage corned beef t-bone pork belly drumstick</div>
      </div>
      <div class="custom-cell">
        <h4 class="heading">Lead Scoring & List Segmentation</h4>
        <div class="description">Lorem ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit , morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</div>
      </div>
      <div class="custom-cell">
        <h4 class="heading">Integration With 3rd-party Systems</h4>
        <div class="description">Lorem ipsum dolor sit amet, hunt anything that moves or hopped up on goofballs hide when guests come over. Hide when guests come over intrigued by the shower, or stare at ceiling climb leg for stretch and use lap as chair. Hunt anything that moves flop over, leave dead animals as gifts for chase imaginary bugs, chase mice for stare at ceiling yet hopped up on goofballs.</div>
      </div>
      <div class="custom-cell">
        <h4 class="heading">Email Creative & Marketing Campaigns</h4>
        <div class="description">Lorem ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit , morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</div>
      </div>
 </div>

РЕДАКТИРОВАТЬ: Чтобы попытаться соответствовать стандартам StackOverflow, как указано в комментариях, я сократил свой HTML, чтобы создать немного больше простой пример для тех, кто просматривает этот вопрос в будущем. https://codepen.io/kierrapalmer/pen/ExVZVLN