Multiple images with hover effects in a single sprite

[ulthane]

Hello all,
I’m currently working on this site: http://angular.l2ovc.com/

And i’m trying to make the banners to the right extend to 100% width, and if possible, also have auto height in order to keep aspect ratio.

The problem is that all these images are a single sprite (trying to save resources here) so I can’t figure out a way to do it.
I tried to achieve this using both background-image and img tag, I don’t seem to get it to work.

This is the sprite used:

Looking forward for some advice / solutions,
Thanks!

[Erik_J]

@ulthane

i’m trying to make the banners to the right extend to 100% width

To adjust the backgrounds to 100% width:

The sprite is 722px x 400px and the banner images are 361px x 80px.

The banner anchors are 418px wide and 80px high. They need to grow height to 92.63px in order to keep the ratio of a wider image. Applied height will be 93px.

To extend the images to 100% the sprite needs to grow to 836px (418+418) x 463px (5 x 92.63px)

Then the background positions need to adjust to the 418px x 92.63px image sizes.

Default / hover:
0 0 / -418px 0
0 -93px / -418px -93px
0 -185px / -418px -185px
0 -278px / -418px -278px
0 -371px / -418px -371px

Above is to fit the anchor sizes you have now, if the anchors are changed the sprite need to change its background size and positions accordingly.

[ulthane]

Hey @Erik_J thanks for the response, it indeed works!

But there is a small annoying issue that I noticed after the change (dunno if directly related), when reloading the page all the hover images appear to the right of the banners for like few milliseconds, then disappear again.
Hard to capture a screenshot of it but you should be able to see it after reloading the page, any ideas?

[Erik_J]

@ulthane

you should be able to see it after reloading the page,

I don’t see that happen. Neither through a F5 or Ctrl+F5 reload in my browsers.

Does it depend on zoom or viewport size?

[ulthane]

Not using any zoom and I dont think it depends on viewport size.
Did you check it in Google Chrome?

I managed to capture it, that’s how it looks like for a few milliseconds after page reloads:

Its not only the banners that are expanding but also the top container, perheps related to the fact i’m using flex here or something?

[Erik_J]

@ulthane

Did you check it in Google Chrome?

Yes and I can see it now in other browsers too.

It’s awkward to debug the site when it demands Javascript to even load. I don’t like to enable Javascript just to get a view of what I’ve landed on. Those sites doesn’t get my trust.

Rather than blaming the css I would guess the issue has to do with some script messing with the loading.