Change Background from Bottom to Top on Hover

Change background from bottom to top on hover

There is no way to (generically) apply a transition direction in CSS. However, we can work around that limitation by using a pseudo element (or other method like how this example uses gradients).

By using a pseudo element, which initially has a visible height of 0, we can transition the height from and to a desired direction when the link is hovered. It's best to use transform: scale for performance reasons, which means that we need to set our transform-origin to bottom center in this case to make sure it goes from bottom to top.

This approach is probably the most general, working with non-solid backgrounds and such, but does require a pseudo element or child element.

The CSS for that approach would be:

li {
    background: red;
}
a {
    position: relative;
    z-index: 1;
}
a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom center;
    background: blue;
    z-index: -1;
    transition: transform 0.3s;
}
a:hover::after {
    transform: scaleY(1);
}

Demo

CSS: Background fills on hover from bottom to top:

You're changing wrong parameter:

a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;

a {  box-shadow: inset 0 -3px 0 -1px #FFF986;  transition: box-shadow .15s ease-in-out;  color: black;  line-height: 40px;}
a:hover {  box-shadow: inset 0 -40px 0 -1px #FFF986;}

<a href="#">Hey Mickey!</a>

On hover fill button background from bottom to top and text color from bottom to top

Consider an extra layer for the background and color the text using a background too. Then simply animate both of the them the same way:

a {  padding:20px;  display:inline-block;  border:1px solid #000;  position:relative;  text-decoration:none;  font-weight:bold;  font-size:20px;
  background-image: linear-gradient(to top, red 50%, #000 50%);    -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;  color: transparent;}a:before {  content:"";  z-index:-1;  position:absolute;  top:0;  left:0;  right:0;  bottom:0;  background-image: linear-gradient(to top, yellow 50%, transparent 50%);}
a,a:before {     background-size: 100% 200%;  background-position: top;  transition: background-position 0.5s ease-in-out;}
a:hover,a:hover:before{  background-position: bottom;}

<a href="#">I'm a link</a><a href="#">I'm another link</a>

How to transition from bottom to top using only hover and without using before or after pseudo element?

So this expands on the original answer I linked to by providing you with different combinations for transitions (trbl). Run the code snippet to see the examples in action.

button {  font-size: 2em;  color: #333;  padding: 8px;  border: 2px solid #333;  margin-bottom: 12px;}
.ex-tb {    background-size: 100% 200%;   background-image: linear-gradient(to bottom, #fff 50%, #333 50%);  transition:     background-position .2s ease-in-out,     color .2s ease-in-out;}
.ex-tb:hover,.ex-tb:focus {  background-position: 0 100%;  color: #fff;}
.ex-tb.ex-t {  background-image: linear-gradient(to top, #fff 50%, #a60000 50%);  color: #fff;}
.ex-tb.ex-t:hover,.ex-tb.ex-t:focus {  color: #333;}

.ex-lr {  background-size: 200% 100%;   background-position: -100% 0;  background-image: linear-gradient(to left, #fff 50%, #333 50%);  transition:     background-position .2s ease-in-out,     color .2s ease-in-out;}
.ex-lr:hover,.ex-lr:focus {  background-position: 0 0;  color: #fff;}
.ex-lr.ex-r {  background-image: linear-gradient(to left, #fff 50%, #333 50%);  background-position: 100% 0;}
.ex-lr.ex-r:hover,.ex-lr.ex-r:focus {  background-position: 0% 0;  color: #fff;}

<button type="button" class="ex-tb">  Example!</button>
<button type="button" class="ex-tb ex-t">  Example 2!</button>
<button type="button" class="ex-lr">  Example 3</button>
<button type="button" class="ex-lr ex-r">  Example 4</button>

How to animate background-color on hovering from bottom to top and again from bottom to top

add a position to <span> with class .underlined

.underlined {
    position: relative;
}

Background color hover animation from bottom to top

You aren't applying any styles to the ::before pseudo element when the .right-block--wrapper element is hovered.

I think perhaps you meant to do this:

.right-block--wrapper {  background: #fff none repeat scroll 0 0;  box-shadow: 0 0 5px 1px rgba(50, 50, 50, 0.75);  display: inline-block;  margin-left: -30px;  margin-top: 9px;  padding: 15px 19px 12px;  width: 100%;  max-width: 429px;  position: relative;  z-index: 2;}
.right-block--wrapper:before {  background: #474747;  bottom: 0;  content: "";  left: 0;  position: absolute;  right: 0;  top: 0;  transform: scaleY(0);  transform-origin: 50% 100%;  transition-duration: 0.3s;  transition-property: transform;  transition-timing-function: ease-out;  z-index: -1;}
.right-block--wrapper:hover:before {  transform: scale(1);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="right-block--wrapper">  <p>Demo Content</p></div><!-- right-block--wrapper -->

On hover fill image (as background) with overlay from bottom to top

This can be achieve using after before & transition property. Please check snippet.

main{position:relative;z-index:0;}.image-wrapper{width: 200px;}.image{ position:relative;background: url('http://example.com/my/image')background-position: center;background-size: cover;background-repeat: no-repeat;height: 200px; background-image: linear-gradient(to top, #414042 100%, #fff 100%);  -webkit-transition: width 2s; /* Safari prior 6.1 */  transition: width 2s;  width:100%;  overflow:hidden;}
.image:after{
 background: #ff0000;  position:absolute;  width:100%;  height:200px;  bottom:-200px;  left:0px;  content:"";    -webkit-transition-duration: 0.5s;    -webkit-transition-timing-function: ease-in-out;    transition-duration: 0.5s;    transition-timing-function: ease-in-out;
}
.image:hover:after{
 background: #ff0000;  position:absolute;  width:100%;  height:200px;  bottom:0px;  left:0px;}

<main><div class="image-wrapper">    <div class="image"></div></div></main>

Diagonally Transition Background Color on Hover From Bottom Left to Top Right

If I understand you correctly all that is necessary is to increase the starting background-size so that no gradient is seen initially.

div {  height: 100px;  background-image: linear-gradient(45deg, blue 50%, lightblue 50%);  background-size: 250% 100%;  background-position: right bottom;  transition: background-position .5s ease;}
div:hover {  background-position: left top;}

<div></div>

transition effect not working on hover with linear-gradient to bottom

The problem is that your styles are not applied when you aren't hovering over the element. The solution is therefore to apply these styles to the default state of the element as well. Something like this:

// html

<div class="container">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
  <div class="box box-4"></div>
</div>

//  CSS

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  border: solid 1px red;
  margin: 5px;
  transition: all .4s ease;
  background-color: lightgoldenrodyellow;
}

.box-1 {
  background-image: linear-gradient(to top, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% 0%;
  background-size: 100% 200%;
}

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

.box-2 {
  background-image: linear-gradient(to bottom, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% -100%;
  background-size: 100% 200%;
}

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

.box-3 {
  background-color: crimson;
  background-image: linear-gradient(to bottom left, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% 100%;
  background-size: 200% 200%;
  background-repeat: no-repeat;
}

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

.box-4 {
  background-image: linear-gradient(to top right, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% -100%;
  background-size: 200% 200%;
  background-repeat: no-repeat;
}

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

Within the declaration block for the hover state, you only need to declare those properties that are changing, in this case background-position.

Here is a working example on JsFiddle.

You probably also want the diagonal gradient to animate up from the bottom left of the element. This is a little tricky to do, but you can see it working in the example. To understand why it works, you need to understand what the x and y values in the background-position property mean. MDN docs are a good place to learn.

How to change size of the background color on hover for the following code?

Instead of padding-right: 15px; you can add padding all around the element with padding: 15px;. padding-right will only add 15px space to the right inner side of your element box, but to produce the effect that you want, you need to apply the space all around your inner box.

So instead of

.menu ul li{
   padding-right: 15px;
   /* rest of its style */
}

your code should be like this:

.menu ul li{
   padding: 15px;
   /* rest of its style */
}

And its final form would be something like this:

$brandColor: darkorchid;
body {
  font-family: system-ui;
  background: linear-gradient(to bottom, $brandColor, darken($brandColor, 15%));
  color: white;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.header {
  height: 100px;
  background-color: #252e38;
  display: flex;
}

.menu {
  margin: auto 0;
  border: thick #FFAA03;
}

.menu ul {
  list-style-type: none;
  display: inline-flex;
}

.menu ul li {
  padding: 15px;
  color: white;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  padding-top: auto;
  padding-bottom: auto;
}

.menu ul li:hover {
  background-color: #0ab2d2;
  text-decoration: none;
}

<header class="header">
  <div class="menu">
    <ul>
      <li class="3">Home</li>
      <li class="3">About Us</li>
      <li class="3">Blog</li>
      <li class="3">Contact</li>
    </ul>
  </div>
</header>

---

Related Topics