Css Transform Scale - Overlaps On Left But Not Right

Ok, So I have a

element that I want to scale using transform: scale(1.2) when on :hover. It works fine except for one issue: the left overlaps fine, the right remain

Solution 1:

You need to increase the z-index of the figure being hovered. But in order for this to take effect, you also need to give it position: relative because z-index only works with non-static elements.

.list-coverfigure {
    ...
    position: relative;
}
.list-coverfigure:hover, .list-coverfigure:active {
    transform: scale(1.2);
    z-index: 10;
}

Demo