Css : Scale background color of a div

Question

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

I cannot find this toolbar button you speak of. Where exactly? — Chris, Jun 02 '16 at 06:52
at the top right these little icons. you need to click launch website and then you will be able to hover these icons — Brandon Jose, Jun 02 '16 at 07:00
a little typo on your CSS: `-web-kit` to `-webkit` - https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix — Sebastian Brosch, Jun 02 '16 at 07:19

score 1 · Accepted Answer · answered Jun 02 '16 at 07:46

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

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

I'm not exactly sure which toolbar button you mean, but if I understand your question correctly you want the background color wrapped around the listitem.

Adding display: inline-table; would normally get the job done.

Here's the fiddle with your example code: https://jsfiddle.net/5v5upekt/5/

Source

edited May 23 '17 at 12:07

Community

1
1

answered Jun 02 '16 at 07:00

Alessio Costa

3
2

score 0 · Answer 3 · answered Jun 02 '16 at 07:14

Sample HTML

<div class="container">
  <h3>Inline List</h3>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

And CSS would be

.container{
      margin:auto;
      background-color:white;
      width:80%;
}


li:hover{
   -webkit-transform:scale(1.1);
   transform:scale(1.1);
   opacity: 0.8;
   background: rgba(0, 0, 0, 0.1) none repeat scroll 0% 0%;
   cursor:pointer;
   }

li{
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    cursor:pointer;
}

You can find some hover and animation effects here

Here is the Demo

Please let me know is this what exactly you required.

I want to scale only the background color not the text who is with it because i know how to scale the whole thing but only the background is more difficult. — Brandon Jose, Jun 02 '16 at 07:15

Css : Scale background color of a div

3 Answers3