встраивание слова в верхней части изображения с помощью CSS

Question

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

ПРИМЕЧАНИЕ: с помощью bootstrap4

Проблема 1: Заголовок и абзац не встроены сверху изображения, но внизу.

Проблема 2: Перед наведением на изображение немного абзаца. Затем, когда он завис, приходит в нужное место. Я не хочу видеть ни одной части абзаца, когда не завис.

figure.effect_project img {
  max-width: 100%;
  height: 300px;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* figure.effect_project figcaption {
    	text-align: left;
    } */

figure.effect_project h2 {
  position: relative;
  padding: 0.5em 0;
}

figure.effect_project p {
  display: inline-block;
  margin: 0 0 0.25em;
  padding: 0.4em 1em;
  background: rgba(255, 255, 255, 0.9);
  color: #2f3238;
  text-transform: none;
  font-weight: 500;
  font-size: 75%;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-360px, 0, 0);
  transform: translate3d(-360px, 0, 0);
}

figure.effect_project p:first-child {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

figure.effect_project p:nth-of-type(2) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

figure.effect_project p:nth-of-type(3) {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

figure.effect_project:hover p:first-child {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

figure.effect_project:hover p:nth-of-type(2) {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

figure.effect_project:hover p:nth-of-type(3) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

figure.effect_project:hover img {
  opacity: 0.4;
  -webkit-transform: scale3d(1.1, 1.1, 1);
  transform: scale3d(1.1, 1.1, 1);
}

figure.effect_project:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

<div class="row text-center">

  <div class="col-lg-3">
    <div class="project keyword-finder grid">
      <figure class="effect_project">
        <img src="static/images/1.jpg" alt="">
        <figcaption>
          <h2>Keyword Finder</h2>
          <div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nesciunt rem in fugit, sed fugiat tempora temporibus iste praesentium ad! Autem enim omnis aut sapiente blanditiis iusto consequatur adipisci expedita?</p>
            <p>alskdjlkqwjelkwj</p>
            <p>lkhasdlknwqmlenlwnklwnqelk</p>
          </div>
        </figcaption>
      </figure>

    </div>
  </div>
</div>