How to display a div as overlay in between the margin of the div contents on hover

Question

I'm working on adding an overlay to my div contents.

As part of this, I have created a.main div with 4 boxes (A, B, C, D).

When I mouse hover on the main div I wanted to show a div as overlay on top of my main div like this, as shown in the image.

I have given a margin: 10px between my contents in the main div (all flex layout).

How can I show the overlay div in the margin spaces between my divs?

Attaching my JSFiddle example:

 .main { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; align-items: center; padding-bottom: 10px; padding-top: 10px; }.main div { display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 1 1 30%; height: 100px; margin: 10px; box-sizing: border-box; } /*.main:hover { background: red; } */.overlay-main { display: none; }.main:hover +.overlay-main { display: flex; background: red; position: absolute; height: 500px; width: 500px; }

 <div class="main"> <div style="background-color:coral;">A</div> <div style="background-color:lightblue;">B</div> <div style="background-color:khaki;">C</div> <div style="background-color:pink;">D</div> </div> <div class="overlay-main"> <span>add row</span> <span>add column</span> </div>

https://jsfiddle.net/deepakpookkote/ears2zyg/14/

the attached image is my expected result on hover

Answer 1

You can do that using: :before and :after :

div.main:hover div::before{
  content: "add column";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  transform: translate(-100%, -50%);
  word-break: keep-all;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 0.8em;
  letter-spacing: -2px;
}

div.main:hover div::after
{
  content: "add row";
  display: block;
  position: absolute;
  top: 100%;
  width: 100%;
  font-size: 0.9em;
  text-align: center;
}

Here is a working Example: jsFiddle