Best way to create a responive image overlay

I am working on my tribute page and am wondering how to create a image overlay:

I am trying to re-create what I did from another project:

When you scroll down to the bottom, the project cards are hoverable with information that appears when hovered over.

No matter what I do I can not re-create this affect. The second I add position: absolute it takes the image overlay out of the normal flow of the document, and sends it to the top of the page.

I use a .image-card container to contain a wrapper with my image, and another division for my .image-desc.

 <div class="image-card">
            <div class="image-card-wrapper">
            <img src="">
            <div class="image-desc">
              <h4>Pretoria Boys High School</h4>
              <p>Elon Musk's...</p>

I used CSS grid and tried to get the elements to occupy the same space on the Grid. The two divs overlap. Any attempt at using a set size for the rows and columns for the grid just cause the image to move on the page and not resize.

The problem is that the image seems to be locked into one size and no matter what I do I cannot get it to size down. The overlay hover transition does nothing and no CSS I use affects the image itself.

Even removing the .image-card container using display does nothing on the image.

.image-card {
  height: auto;
  display: none; /* Does Nothing */
  box-shadow: 2px 2px 5px black;
  transition: 0.7s ease-in-out; /* Ease-in-out not working, appears instantly after timer */
  min-width: 250px;
  display: grid;
/*   grid-template-columns: 100px; Just causes the image to overlap the text to the right
  grid-template-rows: 100px; */
.image-card-wrapper, .image-desc {
  margin: 0px;
  grid-column: 1;
  grid-row: 1;
  width: 25%; /* Does Nothing */
  height: auto;
.image-desc {
  height: 100%;
  width: 100%;
  margin: 0;
  visibility: hidden;
  background-color: black;
  opacity: 0.7;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 1s ease-in-out;
.image-card:hover .image-desc {
  visibility: visible;
  cursor: pointer;

Does anyone have any ideas on how to get one div to overlay one another, and both div’s be sizeable (in percentages)? I see a lot of examples where they put the divs next to each other and change the margin of one image, such as -x number of pixels top the left, to overlap them. But this is highly unresponsive and doesn’t work as the image changes size.

Maybe I’m just blind, but I don’t see any overlay code in the first Codepen you linked to. You can create a fork for the version with your broken overlay code so we can see it.

As for deleting the thread, I don’t really see a good reason for it.

1 Like

I ended up deleting the code after I couldn’t figure it out. Every online solution I would find would not work or not be responsive.

Here is a pen with the same code, however, it doesn’t seem to function the same as I had it before it was deleted:

The issue is that I don’t know the height and width of the image I am trying to overlay. I want to just set it to 25% of the width with a auto height, same with the overlay, and have them be the same size.

The issue is that the image usually never resizes or doesn’t align with the overlay.

What is stopping you from just copy-pasting the cards from the Portfolio Page project and just renaming the classes and replacing the image sources?

Just as an aside, I would suggest you use the src attribute if you are going to use an img element and not using the content property like you are in that project.

You are also using Bootstrap in that project which adds some stuff you do not have in the example pen, like its reset and box-sizing: border-box.

1 Like

I tried taking the old project overlay and was able to get it to work. I just have issues making it responsive.

On large screens it looks nice, but on smaller screens it doesn’t look as nice.

I’m having issues making it responsive.

The image changes size independently of the overlay.

Since I user a percentage to define the width of each row-text-wrapper, it always will go to 50 percent no matter the screen size (until it flex-wraps due to min-width on image).

Should I just use media quires to use pixel sizes instead of percentange?

Is their a way to do this using flex-grow, while just adding max-widths to the text and project card to make sure they don’t get too wide? Then I could align the items in flexbox to the end for the image and start for the text to get them next to each other?

The items would move into the expanding space before resizing.

If you give the image container height: 100% it will be the height of the image. You probably also shouldn’t allow the columns to get so narrow.

Not to state the obvious here but you can’t have the images and text always grow the same amount in height. Text will just reflow to the next line and you can have as much as you want. Images have an intrinsic size and aspect ratio, you can not magically make them take up an infinite amount of height. You can set a height and use object-fit on images, but they will get cropped so you can’t just let them grow in height and shrink down in width indefinitely.

1 Like

I think I got it:

I used some widths in pixels and somehow locked the card, overlay and image to the same size without seperating

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