使用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>