CODEWITHSUNDEEP
csscss-transitions
MeltingDog
MeltingDog

Reputation: 15404

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)?

Upvotes: 1

Views: 7181

Answers (4)

Ajay Singh
Ajay Singh

Reputation: 733

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>

Upvotes: 0

Beno
Beno

Reputation: 4753

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/

Upvotes: 4

jkris
jkris

Reputation: 6511

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>

Upvotes: 2

Blezx
Blezx

Reputation: 614

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>
<a href="#" class="ripple-button1"><div class="wave1"></div>Hover !</a>

Upvotes: 0

Related Questions