1

I'm relatively new to coding and I'm using codepen.io to get better, so ignore the actual content its something to practice on. Anyways I'm trying to do multiple overlays on images on one page. I can't seem to figure out how to get the overlays to be on their individual images.

here's the codepen link: https://codepen.io/ToxicCookie/pen/RmXYLv?editors=1000

<html>
  <head>
    <style>
      * {
        background-color: #d7c2fc;
        font-family: Courier New, monospace;
      }
      #title {
        text-align: Center;
        font-size: 50px;
      }
      .container {
       position: relative;
       width: 50%;
       }
      .image {
       display: block;
       width: 300px;
       height: 250px;
       }
      .overlay {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       height: 250px;
       width: 300px;
       opacity: 0;
       transition: .5s ease;
       background-color: #008CBA;
       }
      .container:hover .overlay {
       opacity: 1;
       }
      .text {
       color: white;
       font-size: 20px;
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       text-align: center;
       background-color: #008CBA;
       }
      #animals {
        position: fixed;
      }
      #earth{
        position: fixed;
        left: 320px;
      }
      #body{
        position: fixed;
        left: 630px;
      }
    </style>
  </head>
  <body>
    <h1 id= "title"> Why be Vegan?</h1>
    <div class="container">
    <img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
  <div class="overlay">
    <div class="text">Animals</div>
  </div>
</div>
    <div class="container">
    <img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image" >
  <div class="overlay">
    <div class="text">Earth</div>
  </div>
</div>
    <div class="container">
    <img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image">
  <div class="overlay">
    <div class="text">Body</div>
  </div>
</div>
  </body>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Bridget Kacprzyk
  • 27
  • 5
  • 1
    Think this was asked. https://stackoverflow.com/questions/21086385/how-to-make-in-css-an-overlay-over-an-image – Arundeep Chohan Jun 09 '19 at 02:28
  • @TemaniAfif You better not replace code in quetion with the answer. No? :) – Itang Sanjana Jun 09 '19 at 07:25
  • @ItangSanjana I didn't replace with the answer. I copied the code from codepen to the question because we need the code within the question and not as external link. The OP can easily edit the codepen to fix the issue and the question will become useless – Temani Afif Jun 09 '19 at 07:27
  • @TemaniAfif I see. Pardon my misunderstood :) – Itang Sanjana Jun 09 '19 at 07:29

2 Answers2

1

You are making the image to be position:fixed which is the culprit. Remove it and make the container inline-block instead:

* {
  background-color: #d7c2fc;
  font-family: Courier New, monospace;
}

#title {
  text-align: Center;
  font-size: 50px;
}

.container {
  position: relative;
  display: inline-block;
}

.image {
  display: block;
  width: 300px;
  height: 250px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  width: 300px;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #008CBA;
}
<h1 id="title"> Why be Vegan?</h1>
<div class="container">
  <img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
  <div class="overlay">
    <div class="text">Animals</div>
  </div>
</div>
<div class="container">
  <img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image">
  <div class="overlay">
    <div class="text">Earth</div>
  </div>
</div>
<div class="container">
  <img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image">
  <div class="overlay">
    <div class="text">Body</div>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

figure {
  position: relative;
  max-width: 222px;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

figcaption {
  align-items: center;
  background-color: whitesmoke;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.5s ease;
}

figure:hover figcaption {
  opacity: 0.75;
}
<figure>
  <img src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg"
       alt="The beautiful MDN logo.">
  <figcaption>Animal</figcaption>
</figure>

Notes:

  • Use semantic HTML element if possible. i.e <figure> & <figcaption>
  • Add CSS relative position to the parent node of the absolute/fixed position.
  • Make image responsive if possible height: auto; max-width: 100%. Better to also use the media or image source element <source>.
Itang Sanjana
  • 649
  • 5
  • 8