JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 blured">
      <a href="#" id="hrefBlur0">
        <img id="imgBlur0" class="blur img-responsive" src="http://getbootstrap.com/assets/img/bootstrap-stack.png" />
        <h2 class="text_on_blurred text-center">About us</h2>
      </a>
    </div>
    <div class="col-md-4 blured">
      <a href="#" id="hrefBlur1">
        <img id="imgBlur1" class="blur img-responsive" src="http://getbootstrap.com/assets/img/bootstrap-stack.png" />
        <h2 class="text_on_blurred text-center">Our offer</h2>
      </a>
    </div>
    <div class="col-md-4 blured">
      <a href="#" id="hrefBlur2">
        <img id="imgBlur2" class="blur img-responsive" src="http://getbootstrap.com/assets/img/bootstrap-stack.png" />
        <h2 class="text_on_blurred text-center">Contact us</h2>
      </a>
    </div>
  </div>
</div>

CSS

.blured {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  margin-top: 15px;
  margin-bottom: 15px;
}

.blured img {
  transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
  backface-visibility: hidden;
}

.frame {
  border: solid 15px red;
  margin-top: -15px;
}

.blur {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  opacity: 0.7;
}

.text_on_blurred {
  color: white !important;
  font-size: 19pt!important;
  width: 95%;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8), 4px 4px 4px rgba(0, 0, 0, 0.4), 6px 6px 6px rgba(0, 0, 0, 0.2);
}

JavaScript

$("#hrefBlur0").hover(function() {
    $("#imgBlur0").toggleClass("blur frame");
  });
  $("#hrefBlur1").hover(function() {
    $("#imgBlur1").toggleClass("blur frame");
  });
  $("#hrefBlur2").hover(function() {
    $("#imgBlur2").toggleClass("blur frame");
  });