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

Issue

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

Solution

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

Answered By - Abd Elbeltaji