How to make background scale from center outwards with CSS transition - css

Question

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 1

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);
transition: all 450ms ease 0ms;
}
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/18/

Answer 2

Use box-shadow
li { position: relative; display: inline-block; padding: 10px; }
li:before {
content: '';
height: 1px;
width: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 0px #18b;
border-radius: 50%;
background: #18b;
transition: all .3s;
opacity: 0;
z-index: -1;
}
li:hover:before {
box-shadow: 0 0 0 15px #18b;
opacity: 1;
}
<ul>
<li>1</li>
<li>2</li>
</ul>

Answer 3

You could try something like this. You could also use jquery to get the same effect.
/* Material style */
button {
height: 200px;
width: 200px;
border: none;
cursor: pointer;
color: white;
padding: 15px;
border-radius: 360px;
font-size: 22px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
background: #2196F3;
}
/* Ripple magic */
button{
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 50%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
/* On Hover */
.ripple-button1{
position:relative;
width:200px;
height:200px;
background-color:#99C;
color:#FFF;
border-radius:360px;
text-decoration:none;
text-align:center;
vertical-align:middle;
display:table-cell;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
}
.wave1{
position:absolute;
width:200px;
height:200px;
background-color:#FFF;
top:0;
left:0;
transform: scale(0);
opacity:0.5;
border-radius:300px;
}
.ripple-button1:hover > .wave1{
animation: ripple-in1 2s;
}
#keyframes ripple-in1 {
0% {transform: scale(0);}
20%{transform: scale(1);opacity:0.3;}
100%{transform: scale(1);opacity:0;}
}
<h3>Ripple on Click</h3>
<button>Click !</button>
<h3>Ripple on Hover</h3>
<div class="wave1"></div>Hover !

Answer 4

I was looking for the same. Thank you for raising. Though you have already chosen an answer, I'll share my hack which looks similar to the one on the quoted page.
div {
margin: 25px;
height: 100px;
width: 100px;
text-align: center; //Fix the element to center
}
span {
width: 50px;
height: 50px;
padding: 5px;
border-radius: 50%;
}
span:hover {
color: #fff;
background: rgba(0, 151, 167, 0.5);
padding: 15px; //Transform padding, width and height instead of border-radius
width: 20px;
height: 20px;
transform: scale(1);
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 1ms;
}
<div>
<span>42</span>
</div>