Streaming live at 10am (PST)

Grid images are glitching upon hover

I have grids that are glitching upon hover when you hover between multiple grids, can’t seem to figure out how to stop this. Any help is appreciated!

Here is my site Read-Only:

This is because you have manual positioning and all kinds of things all weird for your grid. What are you trying to do? The way you structured this isn’t right.

Have you spent time learning on the university page?

I figured that the structure may not be quite right, and yes I have.

Here’s a link to a post that solved the issue of what I wanted to accomplish - Help triggering other div blocks upon hover but now I have this glitching issue if you hover over too many at once.

I’m thinking if the images/text eased in/out it could solve the issue? And I tried to set it to that on the trigger, by delaying it, but I didn’t have any luck accomplishing it.

Here’s the live link -

Yeah, I have no clue how to do what you want to do. I also don’t really understand why you’d want to do that so I can’t really offer another alternative. Sorry I can’t be of more help as generally I would recommend changing your user experience.

Each square represent a different category. When you hover over say the “Fashion” square, all of the other squares will show an image from the Fashion category, replacing the image that’s initially there. When you hover out, those images are hidden, until you hover over another square.

This design is just on the homepage, I have a menu on all pages that you can easily navigate to. The user won’t spend much time on the homepage. The homepage is just a first glance of the different categories that the user can navigate to. I just wanted the homepage to be displayed in what I think an interesting way lol.

So there’s a bigger issue with this experience, it can never be responsive for touch devices as there is no hover functionality, which means 60-80% of your user base won’t be able to use your site.

What I suggest is actually using the tabs component to click load different tabs with dynamic lists in them for each category. much simpler experience.

That’s a good idea, I agree. I’ll try that out, thanks for taking a look at this @DFink

Hello @casen,

I think what you are trying to accomplish could look pretty cool. You should give it a try at least. I would suggest you to instead of making the whole cell of your grid trigger the animation, change the trigger to the title on the cell. That way the animation will not trigger the animation each time a cell is hovered. I hope that makes sense. Let me know how it goes.

Hey @Pablo_Cortes,

Thanks for your kind words of encouragement, I took your advice and it worked! The glitch is gone, thank you!

I would like to know your thoughts on how the homepage looks on mobile?

When I click a category, it will take me to the page, but if I hit the back button, it’s frozen on all of the divs that represent the category I clicked on (the page doesn’t refresh back to it’s original homepage state).

I would want users to click the menu, but they may just click the back button on their browser and if they do, I don’t want this to happen.

Is there a way to fix this? Or should I just make it easier and remove those element triggers from triggering on tablet/mobile and have it appear like this instead? (disregard mobile nav menu placement)-

1 Like

Great job @casen,

The back button did work on my phone, the problem is since there is really no hover on mobile whenever I went back to the home page the tiles sometimes looked different. So you should think about disabling the hover interaction on mobile and keep a consistent tile system there. Also some pages would just look black and content only came back after I clicked on the plus sign? I don’t know if you want that on purpose or if it is an interaction that is not working.

Thanks @Pablo_Cortes,

I agree, thanks for your input. And yeah, that’s a quick fix on my part - I was testing things out on other pages, hiding a few elements on mobile. The site is almost done! Thanks again for your help!

1 Like