CODEWITHSUNDEEP
htmlcsshoverwidthtransition
David Sarrà
David Sarrà

Reputation: 55

:hover width transition glitching

I am trying to change the width of an element when hovering over it. It appears to work, but it keeps transitioning as long as I keep the mouse over the element, resulting in a glitch-like loop. How can I make the transition to happen just once?

Thank you.

html:

<div>
  <div>
   <img id="img" src="#"/>
  </div>
</div>

css: 

#img { 
  width: 326px;
  height: 326px; 
  -webkit-transition: width 0.4s, height 0.4s; 
  transition: width 0.4s, height 0.4s;
}

#img:hover { 
  width: 0px; 
  height: 326px; 
}

Upvotes: 0

Views: 304

Answers (1)

phakkert
phakkert

Reputation: 78

After tinkering with this for a while, I realised that as the image gets smaller to width: 0, your cursor will eventually leave the image causing the hover state to no longer be in effect. This makes the image go back to full width until it hits your cursor again and tries to become smaller. This keeps infinitely going.

Assuming your images stay at 326px, I edited it a bit to make the parent the same size and on the hover of the parent, it will make the child smaller. This will keep the hover area at the same size, thus not causing the glitch.

Have a look at this codepen

Upvotes: 1

Related Questions