Question

I have a div which when hovered scales up in size – This all works fine and looks great.

However, if one of divs I hover is close to the edge of the container, the scaled div does not overlay.

Images:

Before Hover:

On Hover:

As you can see the increased size div is behind the grey div.
I have tried playing with z-index values, but seems to have no effect in this case.

Is this possible using css transforms or will I have to use a different method

Thanks
AH

Answer 1

It’s a simple css issue. You want things inside the div in the document tree to be displayed even if visually they are outside the div. That’s what they call overflow, so:

div.outer
{
    overflow: visible;
}