CODEWITHSUNDEEP
htmlcss
JasonGenX
JasonGenX

Reputation: 5434

CSS: Background fills on hover from bottom to top:

please take a look at this example:

https://www.outsideonline.com/2317131/wilma-rudolph-worlds-fastest-woman

Note that when you hover over link, the background animated to fill the anchor text from bottom to top, and clears is from top to bottom when you hover away from it.

I've done something similar with my own website. The relevant CSS for it:

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

a:hover {
    box-shadow: inset 0 -3px 0 40px #FFF986;
    -webkit-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
}

This gives me a similar effect, but instead of filling from top to bottom like in the example link: The background starts to fill from all sides of the rectangle toward to center.

How do I force it to fill from top to bottom, like in the example link I shared? what am I missing?

Upvotes: 2

Views: 9823

Answers (3)

Shemanta Bhowmik
Shemanta Bhowmik

Reputation: 1

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>

Upvotes: 0

Kosh
Kosh

Reputation: 18393

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>

Upvotes: 7

Ori Drori
Ori Drori

Reputation: 191976

Another solution that uses a 50%/50% linear gradient resized to 200%. To animate the background change the background position:

a {
  background-image: linear-gradient(to top, yellow 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.5s ease-in-out; /** I've changed the time for demo purposes **/
  color: black;
}

a:hover {
  background-position: bottom;
}
<a href="#">I'm a link</a>
<a href="#">I'm another link</a>

Upvotes: 5

Related Questions