Using display to hidden and show some elements with CSS

In this code https://codepen.io/lighting206/pen/dyvjbGN
when i hover on each images two options would appear “comment” and “view page” what i want is when i click on each one, this grid images disappear and i get a two grid box like this : https://jsfiddle.net/lighting/t9oh4Lju/

I want to keep those fixed header at top and navbar at left with these new boxes. i tried using display:none; for boxes and making it visible after clicking on message link but it didn’t work!