CODEWITHSUNDEEP
javascripthtmlcss
Bridget Kacprzyk
Bridget Kacprzyk

Reputation: 27

Using overlays on multiple images on one web page

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>

Upvotes: 1

Views: 1063

Answers (2)

Itang Sanjana
Itang Sanjana

Reputation: 717

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

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273740

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>

Upvotes: 1

Related Questions