Image scroll towards the top on Hover


The overlap was caused by the 20px margin you added as already mentioned by Technobear and would correct the overlap issue.

The gap at the bottom of the image when scrolled was because you set a height on the containing div that was more than twice the height of the image.

If you want a fully responsive container using foreground images then you will need to use object-fit or an object-fit method (which I think we have mentioned before). If you are prepared to use background images then it will be easier but I see these images as content so really should be in the html.

I'm only just back now so give me an hour or so and I will knock up a responsive version of my codepen. The original codepen didn't need to be responsive because it would fit on all screens as it was. However if you need it inside a percentage container then you will need to change things around a bit. I would not have placed them in a percentage container because they soon get too small and I would have used a construct that wrapped the images to a new line when needed.


It depends for what property. The discussion was about width: auto. And auto is the default for width.


Yes, I was just pointing out that auto is not a reset for everything (such as margin) and you need to refer to the intial value in the specs for the property you are using.

auto is used to removed preassigned values by other CSS rules, and let the browser decide the width.

Again it is not as clear cut as this and width:auto for an absolute element is not the same as width auto for a static element. An absolute element with width auto defaults to content width whereas a static element allows the element to fill the containing block. But I understand what you meant :slight_smile:

The devil is in the detail as usual with CSS which is why I try to be clear but sometimes its too complicated to give specifics in a few words.:wink:



what are foreground images?

What I understand is If we set .screen img {width:100%} → This will pixelate, and this is where object-fit property is needed?`


Hi there codeispoetry,

in post #56, you pointed out that...

Then in post #65, when you were asked... replied...

I do not recollect saying that, or ever holding that opinion. :unhappy:

Don't let that stop you from searching, though, as I have often been prone
to suffer from "Senior Moments" or, as I prefer to call them, "Brain Farts" . :biggrin:



This is a work in progress (as I am short of time) but I would be looking at something like this.

Open and close the window to see the effect.

Within reason it will accommodate images of any size as it uses object fit for modern browsers (not ie yet) and for slightly older browsers it uses an oversize trick to mimic some of the behaviour of object-fit. The code is quite complex as it does a lot.

I inserted the routine into a flex layout for testing as you can see below the initial images. Flex also allows each box to be the same height and have the footers nicely aligned on each.

As I said I just knocked this up in a few minutes so please refine as necessary:)


Off Topic

I think the discussion @codeispoetry remembers about whether or not sprites are an outdated technique may have been this one:


That may very well be true, but I was not a contributor to that discussion. :wonky:



I am more often likely to be wrong than right. :wonky:

This is due to my congenital contrariness and my Luddite tendencies. :winky:



Hi there @coothead,

Off Topic

I think you are right here. I messed up two things. You never said anything for sprite, but for PSD →

Somehow my mind collected and reproduced the wrong fact. I am sorry in future I will take care of writing anything publically. I am really sorry.


No need for apologies. :unhappy:

You're probably too young for "Senior Moments",
but "Brain Farts" can be extruded at any time. :rofl:



I said that based on this article:, which says:
If the user is on HTTP/2: You’ll serve more and smaller assets. You’ll avoid stuff like image sprites, inlined CSS and scripts, and concatenated style sheets and scripts.

But then again that might not be entirely true and sprites do offer some advantages on HTTP2 as well. I generally think that site is a great source of info and great quality articles... but everyone is allowed to "brain fart" sometimes right @coothead? :smiley:

Edit: In the comments they debate with the author about this exact same topic


Of course they are. :winky:

Welcome to my world. :weee:



I was able to reduce the image sizes from 1.2MB to these ones in Kb does this now sounds acceptable?


Yes that's a great improvement and your visitors will be thankful :slight_smile:


I uploaded them as a WordPress media. WP has their own code style of converting every media into multiple image sizes. I chose the 768X.... as that one was not cropped, but still significantly reduced in size,(the memory).

WP creates multiple sizes

like this →


I don't think that many HTTP requests can be faster than one with HTTP/2. Or is so?


Well the point is that in HTTP2, at least according to the author in that article, you should try to serve only the content you need. Because there is not so much overhead in HTTP2 for a request... Then bundling files does not make that much sense... As many times you'll serve a lot of things that are not needed in that page... Not having bundled everything allows you to serve exactly what is needed and that might have an impact in speed.

Edit: then I just found this other article at CSS Tricks that talks about this exactly and tries to debunk some of the assumptions. As many times happens the answer is 'it depends' :slight_smile:


Youn nailed it!


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.