JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div class="columns is-multiline is-mobile">
  <div class="column has-text-centered is-narrow">
    <figure class="image textWithBlurredBg">
      <img src="https://images.unsplash.com/photo-1519262113844-152510a1d98a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=11972b5dd562c360eeb4941abd19ca2e&auto=format&fit=crop&w=400&q=60">
      <h2 class="title">Name</h2>
      <h3 class="subtitle">Job Title</h3>
    </figure>
  </div>
  <div class="column has-text-centered is-narrow">
    <figure class="image textWithBlurredBg">
      <img src="https://images.unsplash.com/photo-1515621061946-eff1c2a352bd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=201965739764d1554eaa299d8a458d7d&auto=format&fit=crop&w=722&q=80">
      <h2 class="title">Name</h2>
      <h3 class="subtitle">Job Title</h3>
    </figure>
  </div>
  <div class="column has-text-centered is-narrow">
    <figure class="image textWithBlurredBg">
      <img src="https://images.unsplash.com/photo-1508341591423-4347099e1f19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b83c9d9a71fa57a216d3343f40c3747c&auto=format&fit=crop&w=400&q=60">
      <h2 class="title">Name</h2>
      <h3 class="subtitle">Job Title</h3>
    </figure>
  </div>
  <div class="column has-text-centered is-narrow">
    <figure class="image textWithBlurredBg">
      <img src="https://images.unsplash.com/photo-1524828121784-0b7e1d73a23a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c0a4b85a56023ce08b1bc8af202400a8&auto=format&fit=crop&w=400&q=60">
      <h2 class="title">Name</h2>
      <h3 class="subtitle">Job Title</h3>
    </figure>
  </div>
  <div class="column has-text-centered is-narrow">
    <figure class="image textWithBlurredBg">
      <img src="https://images.unsplash.com/photo-1508341591423-4347099e1f19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b83c9d9a71fa57a216d3343f40c3747c&auto=format&fit=crop&w=400&q=60">
      <h2 class="title">Name</h2>
     ...

CSS

.textWithBlurredBg {
  width: 192px;
  height: 256px;
  display: inline-block;
  position: relative;
  transition: .3s;
  margin: 1px;
}

.textWithBlurredBg img {
  width: 100%;
  height: 100%;
  transition: .3s;
  border-radius: 4px;
}

.textWithBlurredBg:hover img {
  filter: blur(2px) brightness(60%);
  box-shadow: 0 0 16px cyan;
}

.textWithBlurredBg :not(img) {
  position: absolute;
  z-index: 1;
  top: 30%;
  width: 100%;
  text-align: center;
  color: #fff;
  opacity: 0;
  transition: .3s;
}

.textWithBlurredBg h3 {
  top: 70%
}

.textWithBlurredBg:hover :not(img) {
  opacity: 1;
}