- This topic is empty.
-
AuthorPosts
-
August 22, 2014 at 12:28 pm #180294
manish9708
Participantin 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
August 22, 2014 at 12:55 pm #180300Paulie_D
MemberPlay 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
August 22, 2014 at 1:17 pm #180304manish9708
Participantstill 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%; }
August 22, 2014 at 1:30 pm #180305Paulie_D
MemberYou 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.
August 22, 2014 at 1:32 pm #180306manish9708
Participanti am also using “to bottom” but still they are not work .
August 22, 2014 at 1:59 pm #180315manish9708
Participantplzz help me !! i am frustrated !!
August 22, 2014 at 2:11 pm #180316nixnerd
Participantplzz 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]_DAugust 22, 2014 at 2:50 pm #180319__
Participantwhy 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%; }
August 22, 2014 at 2:56 pm #180320manish9708
Participantoh !! its finally work !! special thxx for instant help !! awesome forum support !!
August 22, 2014 at 3:03 pm #180322nixnerd
Participant@__ You are a better man than I.
August 22, 2014 at 4:32 pm #180337__
Participantoh !! its finally work !! special thxx for instant help !! awesome forum support !!
— @manish9708No, 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.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.