Got an annoying niggle with my css for a responsive image gallery

[saulg]

I’ve been hacking around with some code I found at http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/

to create an image swap on mouseover. Here’s what I got to

http://www.shirk.org.uk/test.htm

There’s an alignment problem on mouseover as the image scrolls up about 10 px too far. Ive looked at it in chrome inspect, but I can’t see where in the css this is coming from.

Any pointers much appreciated.

Saul

[jkinney]

You need to add display: block; to .boxInner img { }.

Something I add in almost all of my projects:

img {
    display: block;
    height: auto;
    max-width: 100%;
}

[Author]

Posts