Unable to position my overlay correctly using absolute and relative positions

Jacwilalasey 0
Viewed 38

I am working on a frontend mentor project and am unable to figure out how to get my image overlay to position itself over the image, rather than below it. I have set the parent position to relative and the overlay to absolute with no success. I'm sure there is something simple I am missing, but I can't see it.

.container-main {
        display: block;
        justify-content: center;
        width: auto;
        padding: 2em;
        max-width: 80rem;
        background-color:  hsl(216, 50%, 16%);
        border-radius: 0.9375rem;
    }
    
    .nft {
        position: relative;
        width: 100%;
        height: auto;
        max-width: 21.875rem;
        max-height: 21.875rem;
        border-radius: 0.625rem;
    }
    
    /* The overlay effect (full height and width) - lays on top of the container and over the image */
    .overlay {
        position: absolute;
        height: 100%;
        width: 100%;
        max-width: 21.875rem;
        max-height: 21.875rem;
        border-radius: 0.625rem;
        opacity: 0;
        transition: .3s ease;
        background-color: hsl(178, 100%, 50%, .4);
      }
      
      /* When you mouse over the container, fade in the overlay icon*/
      .container-main:hover .overlay {
        opacity: 1;
      }
      
      /* The icon inside the overlay is positioned in the middle vertically and horizontally */
      .icon {
        color: white;
        font-size: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
      }`enter code here`
      
      /* When you move the mouse over the icon, change color */
      .fa-solid fa-eye:hover {
        color: hsl(178, 100%, 50%);
      }
<div class="container-main">
  <img class="nft" src="./images/GC.png" alt="nft">
  <div class="overlay">
    <a href="#" class="icon" title="view"></a>
      <i class="fa-solid fa-eye"></i>
  </div>
</div>

css-position css html
1 Answers

The image is not the parent container, in the CSS move the position: relative from .nft to .container-main.

.container-main {
    position: relative;
    display: block;
    justify-content: center;
    width: auto;
    padding: 2em;
    max-width: 80rem;
    background-color:  hsl(216, 50%, 16%);
    border-radius: 0.9375rem;
}

.nft {
    width: 100%;
    height: auto;
    max-width: 21.875rem;
    max-height: 21.875rem;
    border-radius: 0.625rem;
}

You're also missing a closing on .container-main in the example.

If .container-main contains more than just as shown, you should wrap your image in another containing div to allow the positioning you want, and move the CSS from .nft to the new parent:

<div class="container-main">
    <div class="nft-container">
        <img class="nft" src="./images/GC.png" alt="nft" />
        <div class="overlay">
            <a href="#" class="icon" title="view"></a>
            <i class="fa-solid fa-eye"></i>
        </div>
    </div>
</div>

With CSS:

.container-nft {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 21.875rem;
    max-height: 21.875rem;
    border-radius: 0.625rem;
}

 .nft { width: 100%; }

You will also need to add an actual position (top, left, right, bottom) value to your overlay, the simplest would be top: 0 as below:

.overlay {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    max-width: 21.875rem;
    max-height: 21.875rem;
    border-radius: 0.625rem;
    opacity: 0;
    transition: .3s ease;
    background-color: hsl(178, 100%, 50%, .4);
  }
Ginji0
Related