Weird overflow issue with images and overlays

I have flex-box gallery-like area in my site, basically three rows of two boxes. each box has an image which is to fully cover it. When you hover over the box, an overlay appears, with a white border and some centered text.

This works, but at the bottom of the gallery area, the images extend too far down, and you can see some of the text and borders that’s supposed to be hidden until you hover over it. Also, the image and text isn’t supposed to extend underneath their containers.

The image boxes are all supposed to be the same size.


The area in question is:
----div.subject (these are the boxes that are supposed to contain the images
----other div.subject


I think I fixed it by setting .subject {overflow:hidden}.

There’s also another issue with the first two boxes, I haven’t looked how you’re animating the size of the text box, but while its size changes, the text rearranges itself (the linebreaks change) which looks a little weird. Maybe giving the textbox some padding and animating that too would solve it (to make sure the text box always has the same size). Or setting the line breaks/nobreakspaces manually.

Dang, you’re good @jsdisco, thanks for saving my bacon once again!

Yeah, not sure about that text thing. It’s ugly. The original site uses a different kind of animation that smoothly fades in from below, so I’m looking to implement that. Right now, it’s just moving because of the padding/border being added, I think, so it looks janky.

You can hide the overflow on .portfolio but the image grid is pretty broken below 1270px and when it stacks. Also, you’re not hiding the overlay it’s just underneath the next image row in the grid (which is why you see the overlay on the last row without hiding the overflow).

  1. I would suggest you remove the image grid first and make the single image and overlay work first (as a stand-alone component). You should be able to drop as many as you need into an image grid and have it work.

  2. Add all the default styles that don’t change on .subject-overlay and only change the styles you need on the hover selector. The transition effect is basically just the padding being added (I would transition opacity as well).