Transition background-color via slide animation

Question

I am trying to change the background-color of an element on hover by using CSS transitions. I want to do this by having it scroll up from the bottom. I can fade the background in using this, but I would like it to slide up:

-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;

One other thought, would it be better to scroll up a separate element with the background applied to it?

score 91 · Accepted Answer · edited Apr 24 '21 at 15:47

91

In order to slide the background color up you would need to use a background image, or a gradient of some sort, while gradually adjusting the background-position:

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

<div class="box"></div>

edited Apr 24 '21 at 15:47

Sumit

2,242
1
24
37

answered Dec 23 '13 at 22:17

Sampson

265,109
74
539
565

7

If you want it to slide up, do `background-position: 0% 100%;` – MultiplyByZer0 Dec 23 '13 at 22:27
Good eye, @MistressDavid. – Sampson Dec 23 '13 at 22:28
@Sampson and for sliding to the left side? – SachinKRaj Apr 14 '18 at 12:32
@SachinKRaj switch over the values, quite easy to do – Savage Dec 15 '18 at 09:51

Temani Afif · Answer 2 · 2021-01-30T07:54:52.567

An extension to @Sampson answer where I will consider more friendly values easier to understand:

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  background-size: 200% 200%;
  transition: background-position 1s;
}

.to-top{
  background-image: linear-gradient(to top, red 50%, black 0);
  background-position: top;
}

.to-top:hover {
  background-position: bottom;
}

.to-bottom{
  background-image: linear-gradient(to bottom, red 50%, black 0);
  background-position: bottom;
}

.to-bottom:hover {
  background-position: top;
}

.to-left{
  background-image: linear-gradient(to left, red 50%, black 0);
  background-position: left;
}

.to-left:hover {
  background-position: right;
}

.to-right{
  background-image: linear-gradient(to right, red 50%, black 0);
  background-position: right;
}

.to-right:hover {
  background-position: left;
}

<div class="box to-top"></div>

<div class="box to-bottom"></div>

<div class="box to-left"></div>

<div class="box to-right"></div>

Here is more fancy transitions:

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  transition:  1s;
}

.to-center{
  background: 
    linear-gradient(black,black) no-repeat,
    red;
  background-size: 100% 100%;
  background-position:center;
}

.to-center:hover {
  background-size: 0% 100%; /* Or 100% 0% */
}

.from-center{
  background: 
    linear-gradient(red,red) no-repeat,
    black;
  background-size: 0% 100%;  /* Or 100% 0% */
  background-position:center;
}

.from-center:hover {
  background-size: 100% 100%;
}

.diagonal-right{
  background-image:linear-gradient(to bottom right,red 49.5%,black 50%);
  background-size: 200% 200%;
  background-position:bottom right;
}

.diagonal-right:hover {
  background-position:top left;
}

.diagonal-left{
  background-image:linear-gradient(to bottom left,red 49.5%,black 50%);
  background-size: 200% 200%;
  background-position:bottom left;
}

.diagonal-left:hover {
  background-position:top right;
}

<div class="box to-center"></div>

<div class="box from-center"></div>

<div class="box diagonal-right"></div>


<div class="box diagonal-left"></div>

Related question to get more details about how background-position works combined with background-size: Using percentage values with background-position on a linear-gradient

Other ideas using circular shapes:

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  transition:  1s;
}

.to-center{
  background: 
    radial-gradient(farthest-side,black 98%,transparent) no-repeat,
    red;
  background-size: 150% 150%;
  background-position:center;
}

.to-center:hover {
  background-size: 0% 0%;
}

.from-center{
  background: 
    radial-gradient(farthest-side,red 98%,transparent) no-repeat,
    black;
  background-size: 0% 0%;  
  background-position:center;
}

.from-center:hover {
  background-size: 150% 150%;
}

.diagonal-right{
  background:radial-gradient(farthest-side,red 48%,transparent 50%) no-repeat,
    black;
  background-size: 300% 300%;
  background-position:bottom right;
}

.diagonal-right:hover {
  background-position:center;
}

.to-left{
  background:radial-gradient(farthest-side,red 48%,transparent 50%) no-repeat,
    black;
  background-size: 400% 400%;
  background-position:left;
}

.to-left:hover {
  background-position:center;
}

<div class="box to-center"></div>

<div class="box from-center"></div>

<div class="box diagonal-right"></div>


<div class="box to-left"></div>

Related: How to animate a radial-gradient using CSS?

Transition background-color via slide animation

2 Answers2

Linked

Related