CODEWITHSUNDEEP
css
user1951962
user1951962

Reputation: 125

CSS hover transition / transform background color scale

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);
}

Screenshot

Upvotes: 1

Views: 1898

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

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.

Upvotes: 2

Related Questions