css Question posted in
Some basic documentation can be found here.

Css – Item is flickering when ':hover" pseudo class' 'top'/'TranslateY' is applied

I have the following piece of React code

      <div className="content-container">
        <div className="about-us">
          <h1>Why Fitness Tracker?</h1>
          <div className="info-tab1 info-tab">
            <img key="3" src={orange} alt="Fruit-3" className="fruit-3" />
            <p>Personalize</p>
          </div>
          <div className="info-tab2 info-tab">
            <p>Achieve</p>
          </div>
          <div className="info-tab3 info-tab">
            <img key="4" src={banana} alt="Fruit-4" className="fruit-4" />
            <p>Track</p>
          </div>
        </div>
        <div className="user-reviews">
          <div className="bottom-left-circle">
            <img key="1" src={strawberry} alt="Fruit-1" className="fruit-1" />
            <img key="2" src={apple} alt="Fruit-2" className="fruit-2" />
          </div>
        </div>
      </div>

Each info-tab has applied BubbleUp animation as follows

animation: BubbleUp 1s ease-in-out forwards;

I have also added a :hover pseudo class that should move the item on the Y axis.

.info-tab:hover {
  transform: translate(0, -50px) !important;
}

The problem is that when I hover from upside down the element – everything is fine.
However, upon hovering from the bottom – it starts flickering.
I figured, or I think I do, that when I hover it goes up, then it goes out of range, e.g. the ‘hover’ is no longer active and it comes back, then it starts all over again rapidly.
I can’t seem to find a ‘best practice’ in this scenario or even a simple solution.

I have tried to use TranslateY, top and translate(x, y), but the result is the same.

Tags:

2

Answers


  1. 0

    Wrap your .info-tab elements in a container & try this one :

    .info-tab-container:hover .info-tab 
{   
transform: translate(0, -50px) !important; 
}
    Login or Signup to reply.
  2. 0

    It’s hard to decode this but general rule is if you move a button (or anything) in its hover or active state, make sure to leave something behind that is still clickable.

    You can often use :before pseudo elements to do this or wrap it in something else.

    This may be the problem you are describing, the solution puts an invisible before pseudo in the -50px offset so something can still be hover as the other stuff moves.
    https://codepen.io/chriscoyier/pen/npERPW

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search