[Solved] gradient direction issue

[manish9708]

Your text to link here…

in this tutorial by default gradient hover direction is bottom to top. but i want to top-to-bottom. how can i did it ?? plzz help me ?? i am already so many experiments in his code but i didn’t !! so kindly request to guide me…

CodePen link here: http://codepen.io/daveb/pen/qIikx

[Paulie_D]

Play away to your hearts content.

http://www.colorzilla.com/gradient-editor/

Or just read up on it at https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

[manish9708]

still not work..!!!! why there hover direction is still bottom to top while i am using “to bottom” but its not work ?? why ??

html code:-

<h1>Hovers pop</a></h1>
<a href="#" class="box">
  Tonight at nine
</a>

CSS code :-

.box {
  padding: 2em;
  border: 1px solid #ccc;
  display: block;
  width: 50%;
  height: 300px;
  float: left;

color: black;
  background: linear-gradient(to bottom,white, white 50%, #333 50%, #333);
  background-size: 202% 200%;
  transition: all 0.5s ease;
}
.box:hover {
  background-position: 100% 100%;
  }

[Paulie_D]

You can change the gradient direction by change the word after to.

Try it..there’s all sorts of information available at the link I gave you.

[manish9708]

i am also using “to bottom” but still they are not work .

[manish9708]

plzz help me !! i am frustrated !!

[nixnerd]

plzz help me !! i am frustrated !!

Calm down. I’m going to quote a famous Paulie line and say:

” This is not a code writing service.”
[email protected]_D

[__]

why there hover direction is still bottom to top while i am using “to bottom” but its not work ?? why ??

[emphasis added]

Because the direction of the gradient has absolutely nothing to do with the direction of the hover transition.

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

[manish9708]

oh !! its finally work !! special thxx for instant help !! awesome forum support !!

[nixnerd]

@__ You are a better man than I.

[__]

oh !! its finally work !! special thxx for instant help !! awesome forum support !!
— @manish9708

No, not “support.”

This is a community forum, not a tech support service. Be friendly and participate. Don’t just complain about things not working; try to be a part of finding a solution. It is your problem to solve, not ours.

I hope you caught this part:

the direction of the gradient has absolutely nothing to do with the direction of the hover transition.

…because it’s the actual answer to your question.

Also, you’re welcome. Please drop all the txt speak and !! next time.

[Author]

Posts