<div class="a">
<div class="imgHolder">
  <img src="https://gandalf458.co.uk/images/azJ7ZkOC4jQmzoo7svRW--1--czxes.jpg" alt="" width="300" height="300">
</div>
</div>

.a {
  position: relative;
  width: 600px;
  height: 300px;
}
.imgHolder::before {
  z-index: -1;
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: url(https://gandalf458.co.uk/images/azJ7ZkOC4jQmzoo7svRW--1--czxes.jpg);
  filter: blur(5px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.imgHolder img {
  display: block;
  margin: 0 auto;
  z-index: 1;
}

/* Possible solution for

https://www.sitepoint.com/community/t/display-image-on-blurred-version-of-same-image/433096 
*/