Styling a specific post after hovering over it

I’m not sure why this question is related to WordPress, but you should be able to accomplish what you’re after with just CSS as demonstrated in the following Codepen.

In case something happens to that, the code is copied here.

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>

CSS

* {
  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;
}