- This topic is empty.
-
AuthorPosts
-
August 22, 2014 at 12:28 pm #180294manish9708Participant
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
August 22, 2014 at 12:55 pm #180300Paulie_DMemberPlay 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 #180304manish9708Participantstill 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_DMemberYou 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 #180306manish9708Participanti am also using “to bottom” but still they are not work .
August 22, 2014 at 1:59 pm #180315manish9708Participantplzz help me !! i am frustrated !!
August 22, 2014 at 2:11 pm #180316nixnerdParticipantplzz 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.”
-@Paulie_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 #180320manish9708Participantoh !! its finally work !! special thxx for instant help !! awesome forum support !!
August 22, 2014 at 3:03 pm #180322nixnerdParticipant@__ 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.