# Depth of Field Effect?

**URL:** <https://forum.kirupa.com/t/depth-of-field-effect/639936>\
**Category:** web dev\
**Created:** [June 14, 2019, 11:15am UTC](https://forum.kirupa.com/t/depth-of-field-effect/639936 "2019-06-14T11:15:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![4a0g1kfa54](https://avatars.discourse-cdn.com/v4/letter/4/5daacb/32.png) [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Post date:** [June 14, 2019, 11:15am UTC](https://forum.kirupa.com/t/depth-of-field-effect/639936/1 "2019-06-14T11:15:50Z")

</div>

Hi all,

Just trying to create a modal that zooms and blurs the background back. Based on avgrund by hakim [Avgrund - A modal UI concept](https://lab.hakim.se/avgrund/)

Now it has nesting modals also with the help of @deathshadow over at codingforums.

Here is the current state:

> **[Depth of Field Test - JSFiddle - Code Playground](https://jsfiddle.net/2jddfsjad/1jz0q3xk/19/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

Now, what I am trying to do is:

by clicking the nested modal link, everything should be pushed back again and blurred - like simulating receding layers/depth of field.

I’ve attached an image to explain this:

 ![Sample](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/a/a946099464f755717723c2624ae8d785e7ff3de2.jpeg)

> **[Sample hosted at ImgBB](https://ibb.co/LNB83jm)**
>
> Image Sample hosted in ImgBB

Thanks