Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other [Solved] gradient direction issue

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #180294
    manish9708
    Participant

    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

    #180300
    Paulie_D
    Member
    #180304
    manish9708
    Participant

    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%;
      }
    
    #180305
    Paulie_D
    Member

    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.

    #180306
    manish9708
    Participant

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

    #180315
    manish9708
    Participant

    plzz help me !! i am frustrated !!

    #180316
    nixnerd
    Participant

    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

    #180319
    __
    Participant

    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%;
    }
    
    #180320
    manish9708
    Participant

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

    #180322
    nixnerd
    Participant

    @__ You are a better man than I.

    #180337
    __
    Participant

    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.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Other’ is closed to new topics and replies.