Stacking images on top of each other inside container

HTML & CSS
1

I would like to stack these images but having some troubles.

    <div id="test">
        <img  id="illumin" src="images/illumination.png" alt="some_text">
        <img  id="rays-1" src="images/rays1.png" alt="some_text">
        <img  id="rays-2" src="images/rays1.png" alt="some_text">
    </div>

and css I have so far is…

#test {
   border: 3px solid white;
   position: relative;
   margin-left: auto;
   margin-right: auto;
   width : 20%;
}

#illumin {
   opacity: 0.84;
   max-width:100%;
   max-height:100%;
  }

  #rays-1 {
    width: 100%;
  }  

 #rays-2 {
   width: 100%;
 }

Any help or guidance would be appreciatedd

2

Stribor45,

Since we don’t have those images on our computers, would you please assign width and height attributes to each one with the proper dimensions (which you should do routinely, anyway). We often have to convert them into placeholders so we will not see the alt text (which is what I see now).

Also, please describe the trouble that you are having. There is no guarantee that I will see the same thing that you see when I try the code on my PC. A screen shot might really help along with a description of what you wish to see. You can drag and drop it into the post.

Essentially, I am requesting that you inclulde more information so we do not have to guess. We need help and guidance, too, to help you.

A working page that demonstrates the issue is a great help. Much better than snippits that show nothing.

3

Hi Stribor45, just like @ronpat mentioned , we would like a screenshot of the problem you are having. I just tried your code and it looked like this on my browser.

1679×914 81.4 KB

If the images are not showing up, may be check and make sure your image src is correct. Hope this helps…

4

After giving the border a color other than invisible white, and creating some placeholder images, this is what I see.
It changes width in proportion to the width of the browser window. What is the problem???

5

I just want to stack them on top of each other so only one image is visible

6

@Stribor45, okay now I understand your question. Thank you. I believe if you add position:absolute; to each of your images you can stack them up. Hope this helps, please let us know if this is what you are looking for.

7

Maybe display:block; on the images is what you want…?

8

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