How to make a div float from bootstrap grid to full screen?

Question

css

There is a standard grid of cards col-md col-xs ....
I would like to smoothly increase the block from the place where it is located to full screen and back on click.

jsfiddle.net/87qkpcp7

What is the best way to do this? Create 1 more element in place of the selected one with position:absolute and then move it?

Answer 1

The logic is something like this
It is better that the pop-up image be larger

Answer 2

So? jsfiddle.net/pft7tu49