Brandon Jose Brandon Jose - 6 months ago 14
CSS Question

Css : Scale background color of a div

I have a

div
and I want to have the
background-color
of the
div
scaling after an hover so I did the following:

li {
background-size: 0 0;
transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-web-kit-transition: background-size 2s ease-in
}
li:hover {
background-size: 100% 100%;
background-color: rgba(0, 0, 0, 0.1);
}


I want to achieve a similar effect to the toolbars buttons hover on this website: http://www.materialup.com/posts/material-admin

Era Era
Answer

you need to add a :before element through css to get the desired result.

demo

li {
  width: 40px;
  height: 40px;
  float: left;
  margin-right: 5px;
  background: white;
}

li:before {
  content: " ";
  transition: all 255ms ease-in;
  -moz-transition: all 255ms ease-in;
  -webkit-transition: all 255ms ease-in;
  transform: scale3d(0, 0, 0);
  -webkit-transform: scale3d(0, 0, 0);
  width: 40px;
  height: 40px;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

li:hover:before {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}