Blur background Image but not the shape on that image

Question

There are three important things:

1. Background Image
2. Rectangle shape on the background Image
3. text inside the rectangle shape

Background Image, consider a book with some title on it and that title is aligned at the center of the book. Suppose I draw a rectangle shape over that text so that text can fit inside the rectangle shape. I would like to blur only the area outside the rectangle shape, so that the area inside the rectangle is seen properly. So is it possible that it can be done...?

Something Like this: Sample Image url

<div class="container>

   <div class="shape"></div>

   <img src="image url" ></img>

</div>

Answer 1

 .container{ width: 700px; height: 500px; position: relative; }.container:after{ content: ''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_960_720.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; filter: blur(10px); }.shape{ position:absolute; top: 50%; left: 50%; width: 50%; height: 50%; transform: translate(-50%, -50%); background: url("https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_960_720.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; z-index:1; }.shape p{ color: white; font-size: 22px; text-transform: uppercase; }

 <div class="container"> <div class="shape"> <p>Text inside Rectangle</p> </div> </div>