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 backgrou
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
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%);
transition: background-position 1s;
}
.box:hover {
background-position: 0 -100%;
}
You can see this demo here: http://jsfiddle.net/as5ZU/