Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAlex Oates
7,171 PointsFlipping cards appear jittery on hover
Hi, I noticed that often, however not all the time, when I hover over the flip card it can become quite jittery and not fully complete the transformation, to the extent that I have to try two sometimes three times before it actually works as expected.
I also noticed this happen in the video, is there any specific reason this happens?
I thought that it could be something to do with when the element reaches a certain degree of rotation it loses the state of hover, if that makes sense, and thus not completing the full transform and reverting back to the original state.
Whether it's that or not I don't know, regardless, is there any way to ensure this doesn't happen? As I have implemented this on my own website and I find it could have negative effect on user experience.
Thanks
4 Answers
JM Manalo
21,247 PointsTo whoever goes through this same issue. I'm pretty sure this is caused by your mouse no longer being above(:hover) the .photo
element. Same goes when you apply a translateX(100%)
on an element you hovered on, it'll leave your mouse which means you are no longer :hover
-ing over it. In the video I'm pretty sure it should have been:
.photo-container:hover .photo {
/* transform here*/
}
since .photo-container
never moves so your mouse is always above it.
Catalin Circu
6,744 Pointsoh my god, this is exactly the answer I was looking for! Blessings!
paul oram
3,429 PointsYes this is the best answer! It solves the problem.
jaspergradussen
5,876 PointsYeah I had the same thing, You want the hover effect to take place on the container of the img/photo/whatever, otherwise, the animation of the img/photo might make it that it 'avoids' your cursor and the animation might stop. So if it's set to the 'containing field' of the image, then the hover still applies.
Alex Oates
7,171 PointsThank you, Susan, this worked for me and I am now unable to reproduce the problem.
Susan Mashevich
3,623 PointsGreat. Glad it worked out :)
Susan Mashevich
3,623 PointsSusan Mashevich
3,623 PointsHi Nicole,
It would be helpful if you could provide the code you are referring to, however from your explanation I believe I had experienced a similar issue with the hover effect.
What worked in my case was applying the transition-delay property and adjusting the value to 1s, like this: transition-delay: 1s;
Hope above is helpful.