Overlay one div over another on hover

[anikait1]

I have this design where I have a parent container of fixed height and width. Then this parent container has three divs of equal height but different widths (specified using percentage).

What I want to achieve is when I hover over one of the divs(in this case, the one on the left side) that it expands and overlays over the second one.

In context of this code, I want the message div to hover/overlay over the info div, when I hover over the message div.

https://codepen.io/anikait-makkar/pen/yGJExm

[Paulie_D]

A minimal demo in Codepen.io would be more use that a small amount of code in a codedump.

[anikait1]

Posted a link to codePen

[Paulie_D]

If you are using flexbox this is going to be tricky as an overlay will require absolute positioning.

If so, then the message element would not take up any space in the parent which is obviously a problem.

[JeroenR]

Maybe you could fake it by adding the following? This way the width for both of them is changed as if the first one is on top of the second.

.message:hover {
  width: 60%;
}
.message:hover + .info {
  width: 0;
}

[anikait1]

I have tried doing this but it looks very odd with this and further I have some text in the message div and the way it all gets displayed is not pleasing.

[Author]

Posts