CSS hover transition / transform background color scale

Question

I want an element's background color to change and for the element to grow slightly on hover.

The problem I have is that the background color is being applied on hover but it doesn't cover all of the enlarged div (as transformed using scale on hover).

Please see the attached image and code.

The lighter background should be flush to the dotted border on the left.

Any ideas?

#recent-posts li {
transition: all .1s;
-webkit-transition: all .1s;
-moz-transition: all .1s;
transform-origin:center bottom;
-webkit-transform-origin:center bottom;
-moz-transform-origin:center bottom;
}

#recent-posts li:hover {
transform:scale(1.1);
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
background-color: rgba(0, 0, 0, 0.00);
}  

Answer 1

Your background color has an alpha value of 0.

This makes it completely transparent so there is nothing to show of the background..

It looks like you want the hover color to be the same as the background of the container. In this case you should set the same color of the container as the :hover color of the li .