Flip background Hover Effects

Sorry to bother, but can someone tell me how to get this to look like one large image, not a bunch of teeny ones? Thank you!

You’d have to attach the background image to the container, not every single div:before, but I doubt that’s what you’re after. If you want each element to show a different portion of the image, so that in the end, all elements form the whole image, that would require either a lot of hard-coding background-position values into your CSS for every single div, or automating the process with JavaScript.

1 Like

I watched a tutorial to do this and I keep looking at it and there is no difference between what is in the tutorial and my project. Why would there be different results?

Different results means your environment or your code must be different.

1 Like

Oh well, that sucks. Thank you for your help! :slightly_smiling_face:

May 2019 was a year and a half ago. It’s pretty easy for something in your local environment to be very different. And its pretty easy to have a minor difference compared to a YouTube screenshot of code.


Forget what I said above, it looks like it’s a browser issue. It doesn’t work in Firefox, but in Chrome, you get one large image as in the video.

These tutorials really should include a few comments concerning browser compatibility.

1 Like