The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS image changes position on hover with float left

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #245336

    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)
    try hovering over any image and see how second row image gets messed up..


    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).



    Thanks that solved it :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.