Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
  <div class="blur">
    <img src="https://serienfurecidos.files.wordpress.com/2014/10/arrow-season-3-poster-2.jpg"/>
    <div class="title">
      <span>Arrow: The Flash and Oliver Queen.</span>
    </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

.blur {
    width:50%;
    height:50%;
    
    span{
      z-index:100;
      font-size:35px;
      font-family:"Helvetica Neue";
      margin-left:30px;
      margin-bottom:50px;
      width:30%;
      
    }
    .title {
      position:relative;
      width:100%;
      color:white;
      margin-top:15px;
    }
    img {
      width:726px;
      height:377px;
    position:absolute;
    filter: blur(5px);
  	-webkit-filter: blur(2px);
  	border-radius:2%;
  	box-shadow:220px;
  	
  	&:hover {
	  filter:blur(0px);
	  -webkit-filter:blur(0px);
	  transition: all ease 0.5s;
	  }
  }
}

SassMeister-output.css

.blur {
  width: 50%;
  height: 50%;
}
.blur span {
  z-index: 100;
  font-size: 35px;
  font-family: "Helvetica Neue";
  margin-left: 30px;
  margin-bottom: 50px;
  width: 30%;
}
.blur .title {
  position: relative;
  width: 100%;
  color: white;
  margin-top: 15px;
}
.blur img {
  width: 726px;
  height: 377px;
  position: absolute;
  filter: blur(5px);
  -webkit-filter: blur(2px);
  border-radius: 2%;
  box-shadow: 220px;
}
.blur img:hover {
  filter: blur(0px);
  -webkit-filter: blur(0px);
  transition: all ease 0.5s;
}

SassMeister-rendered.html

<div>
  <div class="blur">
    <img src="https://serienfurecidos.files.wordpress.com/2014/10/arrow-season-3-poster-2.jpg"/>
    <div class="title">
      <span>Arrow: The Flash and Oliver Queen.</span>
    </div>
  </div>
</div>