Hover blur with button

by Lucaskazama

HTML

<div class="main-blur">
  <div class="overlay"></div>
  <button class="btn-pdf">
   Hello
  </button>
</div>

SCSS

.main-blur{
   position:relative;
   display: flex;
   flex-direction: column;
   justify-content: center;   
   margin:0 auto;
   background-color:teal;
   transition: all 250ms ease-in-out;   
   height:300px;   
  .btn-pdf{
    margin: 0 auto;
    display:none;
    z-index:99;    
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    padding: 10px 20px;
    transition: all 0.5s;
    cursor: pointer;
    &:hover{
       box-shadow: 0 2px 4px 0 rgba(0,0,0,0.24), 0 2px 4px 0 rgba(0,0,0,0.19);
    }
  }
  .overlay{
    position:absolute;
    background-image: url('https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fimage.tmdb.org%2Ft%2Fp%2Foriginal%2FbWa0zqqamivrsZ5UL6hnqLVYUqy.jpg&f=1');
    background-position:0 -150px;
    background-size:600px;
    background-repeat: no-repeat;
    height:100%;
    width:100%;
    z-index:0;
    transition: all 250ms ease-in-out;       
  }
  &:hover{
    .overlay{
    filter: blur(3px);
    }
    .btn-pdf {
      display: flex;
    }
  }
}