image changes position on hover with float left

[flex_]

So i’m creating an image gallery with float left and everything is working great but then when i get to second row of images things go haywire. whenever i hover on image on the first row any image on second row position will get messed up by itself. here is the codepen. (my recent art looks way better than the one in codepen but you will get the idea whenever you hover over the image) http://codepen.io/anon/pen/ZpGrVA
try hovering over any image and see how second row image gets messed up..

[bearhead]

It’s happening because the 1px border that you’re adding on hover is making the .middlegallery divs too big.

Assuming that you want a black border to appear within the grey border on hover, I would move the :hover state to middlegallery and create an :after selector for it with an inset box shadow (instead of the border).

demo:
http://codepen.io/kvana/pen/zKGrov

[flex_]

Thanks that solved it :)

[Author]

Posts