Карточка с эффектом наведения текста, толкающая другие тексты

Question

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

, но у меня возникают трудности с перемещением текста, но другие текстовые блоки не имеют, и тогда мой текст поверх текстов:

код:

  <div
    className="a"
    onMouseOver={() => updateHoveredCards('card1', true)}
    onMouseOut={() => updateHoveredCards('card1', false)}
  >
    <div className="title">
      <p className="text-title">Emasa em Ação</p>
    </div>
    <div className="content-header">
      <h3 className="content-text" style={{ color: '#fff' }}>
      Emasa corrigiu vazamento no bairro Pedro Jerônimo
      </h3>
      <p className="date-text" style={{ color: '#fff' }}>
        <span>
          <FontAwesomeIcon
            className=""
            icon={faClock}
            size="lg"
            fixedWidth
            color="#fff"
          />
        </span>
        2020
      </p>
    </div>
    <div className="content-spoiler">
    <p>show this text bottom on hover show this text bottom on hover</p>
    </div>
  </div>

css:

  & .a {
    grid-area: a;
    position:relative;
    background-image: url(${({ bgOne }) => bgOne});
  } 
& .content-spoiler{
    position:absolute;
    bottom:0;
    display:flex;
    max-width:300px;
    background:red;
    ${({ isHover }) =>
    isHover &&
    `
    opacity:1;
    transition: all 0.5s ease;
    bottom:30px;
    `}
  }
  & .text-title {
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 5px 0;
    padding: 3px 7px;
    line-height: 13px;
    pointer-events: auto;
    background-position: top center;
    background: linear-gradient(-45deg, #009ffd, #2a2a72);
    animation: ${HeaderKeyFrame} 5s ease infinite;
    background-size: 150% 100%;
    color: #fff;
  }
  & .content-text {
    max-width: 300px;
    text-align: left;
    font-size: 1.07692308rem !important;
    font-family: Roboto Slab, serif;
    font-weight: 400;
  }
  & .date-text {
    max-width: 250px;
    text-align: left;
    margin-top: 10px;
    font-size: 0.6692308rem !important;
    font-family: sans-serif, serif;
    letter-spacing: 0.1em;
    font-weight: 400;
    & > span {
      margin-right: 5px;
    }
  }

пример кода:

https://codesandbox.io/s/great-snowflake-4dwpy

Я в основном определил мой контейнер как относительный

и мой div как абсолютный с основанием: 0 и затем на нижней части: 30