.textWithBlurredBg {
    position:relative;
    width:300px;
    height:300px;
    display:inline-block;
    float:left;
    background-size:650px;
    background-position:center;
    transition:0.5s;
    
      }
  

 .textWithBlurredBg:hover {
   background-size:580px;
     
  }
 
 .textWithBlurredBg :not(img){
    position:absolute;
    top:0;
    bottom:0;
    left:0px;
    right:0px;
    color:#fff;
    text-align:center;
    width:100%;
    height:100%;
    opacity:0;
    transition:.3s;
    background-color:rgba(198,79,5,0.6);
  
    
  }
  
 .textWithBlurredBg:hover :not(img){
   opacity:1;
}
   
 .textWithBlurredBg p{
    top:-31px;
    font-size:2em;
  }