MeltingDog MeltingDog - 6 days ago 6
CSS Question

How to make background scale from center outwards with CSS transition

I am trying to replicate the effect when you hover over a date with Material UI's date picker here (click on any text input to trigger the picker, then hover over a day) where the background expands outwards from the center.

I've tried to copy the CSS from here, but I've only managed to get the opposite working. See: https://jsfiddle.net/2zkofa0x/3/

My CSS:

span:hover {
color: #fff;
background: rgba(0, 151, 167, 0.5);
border-radius: 50%;
transform: scale(1);
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}


Would anyone know how I can have the coloured background spread out and fill from the center of the element (opposite of what I've got above)?

Answer

You could try like this. It puts the hover effect on a parent div so the hit target is always there.

Also, the circle needs to start off at a scale of 0 so it can expand to the full size during the transition.

HTML:

<div class='container'>
  <div class='circle'>
  </div>
  <span>42</span>
</div>

CSS:

div.container {
  position: relative;
  height: 30px;
  width: 30px;
}

div.container > div.circle {    
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  transform: scale(0);
}

div.container:hover > div.circle {
  background: rgba(0, 151, 167, .5);
  border-radius: 50%;
  transform: scale(1);
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

div.container span {    
  position: relative;
  padding: 7px;
  line-height: 30px;
}

div.container:hover span {
  color: rgb(255, 255, 255);
}

https://jsfiddle.net/2zkofa0x/17/