我不知道为什么这个问题与WordPress有关，但您应该能够通过CSS完成您想要的内容，如下所示Codepen.

如果发生了什么事情，代码将复制到这里。

HTML

<div class="wrapper">
  <a href="#">
    <article class="has-featured-image">
      <div class="post-title">Title</div>
      <div class="post-excerpt">This is an example excerpt. It is two sentences.</div>
      <div class="featured-image">
        <img src="https://lorempixel.com/200/200/"/>
      </div>
    </article>
  </a>
  <a href="#">
    <article>
      <div class="post-title">Title</div>
      <div class="post-excerpt">This is an example excerpt. It is two sentences.</div>
    </article>
  </a>
  <a href="#">
    <article>
      <div class="post-title">Title</div>
      <div class="post-excerpt">This is an example excerpt. It is two sentences.</div>
    </article>
  </a>
  <a href="#">
    <article>
      <div class="post-title">Title</div>
      <div class="post-excerpt">This is an example excerpt. It is two sentences.</div>
    </article>
  </a>
</div>

* {
  transition: all 0.2s ease-in-out;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem auto;
  width: 500px;
}
article {
  background-color: #eee;
  border: 1px solid #333;
  color: #000;
  height: 200px;
  margin: 0.125rem;
  max-height: 200px;
  max-width: 200px;
  min-height: 200px;
  min-width: 200px;
  overflow: hidden;
  position: relative;
  width: 200px
}
article:hover {
  background-color: #fff;
  background-image: initial;
  border-color: #fff;
}
.post-title {
  bottom: calc( 50% - 1rem );
  font-size: 2rem;
  left: calc( 50% - 2rem );
  max-width: calc( 100% - 3rem );
  position: absolute;
  z-index: 99;
}
.post-excerpt {
  color: #eee;
  left: 2rem;
  max-width: calc( 100% - 3rem );
  position: absolute;
  top: 3rem;
  transition: all 0.2s ease-in-out;
}
.featured-image {
  opacity: 0;
  z-index: 0;
}
article:hover .post-title {
  bottom: 2rem;
}
article:hover .post-excerpt {
  color: #111;
}
article.has-featured-image .post-excerpt {
  display: none;
}
article:hover .featured-image {
  opacity: 100;
}