Task. How would you implement the following?

A block with full width and height of the screen:
1)ea30d3a4e8814f9081c1f8727890ac03.jpg

You need to make it so that when you hover over a block, the following has occurred:
The block on which we build expanded by clicking on the other blocks, and on top of this unit overlap another picture, the logo should always be between 2 and 3 unit. This should be done with all of 4 blocks. How would you have implemented?

2) 5f031b57c0b24d2b8ff08759f249a779.jpg

3) c7dacd31c1764ec5bdf60b6961f7fb6a.jpg
July 4th 19 at 23:28
2 answers
July 4th 19 at 23:30
Solution
flexbox
well, then tell me how to make it so that the logo was "floating" was always between 2 and 3 unit? - Bethel.Reichert7 commented on July 4th 19 at 23:33
: the logo is tied to the desired block using abs positioning - cale67 commented on July 4th 19 at 23:36
July 4th 19 at 23:32
Solution
If it is through jqeury, something like this https://jsfiddle.net/04o0c56h/37/, and the team at css;

Find more questions by tags CSSHTMLJavaScriptjQuery