Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Hayden Bradfield
Hayden Bradfield
1,797 Points
Posted by Hayden Bradfield
Hayden Bradfield
1,797 Points

Why is my image broken (not appearing) on the browser?

I am trying to create an faint, transparent overlay on hover.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Overlay Example</title>
        <link rel="stylesheet" type="text/css" href="overlay2.css" media="screen">
    </head>
    <body>
        <div id="overlaycontainer">
            <img src="lion.jpg" alt="froggy on lilly" width="200px" height="150px">
            <div id="overlay">
                <p class="hidden">.</p>
            </div>
        </div>
    </body>
</html>

CSS:

body {
background-color:#545454;
}

#overlaycontainer {
    position:relative;
    width:200px;
    height:150px;
}

img {
    position:absolute;
    width:200px;
    height:150px;
    z-index:1;
}

#overlay {
    position:absolute;
    width:200px;
    height:150px;
    z-index:-2;
    background:rgba(0,0,0,0.5);
}

#overlay:hover {
    z-index:5;
}
Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

It would be nice if you include a link of your project.

1 Answer

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

First, please remove the inline styles of the image tag. unless you are dynamically adding content to the HTML inline styles should be only in your css file.

for the image, I would check your source. in the src of the image tag. maybe it's in a image folder where you would need folder/lion.jpg

is the image showing without the overlay? or does it disappear only when you have the overlay there?

Hayden Bradfield
Hayden Bradfield
1,797 Points
Hayden Bradfield
Hayden Bradfield
1,797 Points

A ripped paper icon occurs on the top right hand corner of where the image should be. And no, the image is in the same folder

Jacob Mishkin
Jacob Mishkin
23,117 Points

If it's a ripped icon, then it means your path to the image is false. Try reviewing where you are storing your image, then write the path in the src tag in the img. Since it's a path issue, I can't see where everything is located and ect.