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! While you're at it, check out some resources Treehouse students have shared here.

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 Unused CSS Stages CSS Animations Full-Page Animation Project: Part 1

Harvey Ngo
Harvey Ngo
4,164 Points
Posted by Harvey Ngo
Harvey Ngo
4,164 Points

Steam.png not showing.

Hi!

So I downloaded the original project file and tried viewing the index.html in my Chrome browser, but for some reason I can't seem to view the steam.png -- I haven't tinkered with the code yet either.

Any thoughts or leads would be greatly appreciated!

6 Answers

Jovanny Elias
Jovanny Elias
16,204 Points

Ok I see the issue. No were in your html do I see a link to the steam.png. If you still haven't moved on further in the video series then It's possible they have not shown you were they want it yet. The files are starters and you work on them to get the end result. Also here is a quick guide on how to post your code.

Code block on Treehouse

On a Mac the backtick is on the bottom.

Justin Estrada
Justin Estrada
34,995 Points
Justin Estrada
Justin Estrada
34,995 Points

So the answer is that you didn't notice that the class boat had the property name opacity with the property value of 0 when you initially downloaded.

Jovanny Elias
Jovanny Elias
16,204 Points
Jovanny Elias
Jovanny Elias
16,204 Points

Make sure that the link in your html file is were you stored the image. Post your html so we can see what the issue may be

Harvey Ngo
Harvey Ngo
4,164 Points
Harvey Ngo
Harvey Ngo
4,164 Points

I'm pretty sure that the link is right..the four .png files are all stored in the img folder, and I'm able to see the island background and boat images just fine. But here is the html code - sorry, wasn't sure if there was a way for me to upload the file itself!

<!DOCTYPE html>
<html>
<head>
    <title>Tugboat Animation</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="animation.css">
</head>
<body>
    <div class="boat">
        <img src="img/boat.png" alt="tugboat">
    </div>
    <img class="mike" src="img/mike.png">
</body>
</html>

----------------- and the main.css -------------------------

body {
    background: #F0FCFF url('img/island.png') repeat-x 100% -460px;
    background-size: 780px;
}
.boat {
    width: 380px;
    position: absolute;
    top: 40%;
    left: 35%;
}
.boat img {
    width: 100%;
}
.boat::after {
    content: "";
    display: block;
    width: 120px;
    height: 120px;
    background: url('/img/steam.png') no-repeat;
    background-size: 120px;
    position: absolute;
    top: -25%;
    left: 5%;
    opacity: 0;
}
.mike {
    width: 180px;
    position: absolute;
    top: 55%;
    left: -15%;
    -webkit-transform: rotateZ(-5deg);
    -moz-transform: rotateZ(-5deg);
    -o-transform: rotateZ(-5deg);
    -ms-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
}

EDIT. Press the edit button to see how I fixed you code so that it may display properly.

Harvey Ngo
Harvey Ngo
4,164 Points
Harvey Ngo
Harvey Ngo
4,164 Points

You were right Jovanny, as I progressed through the video I managed to get the steam to show up. :) I think my worries began though because early on in the video at about 2:43 you can see the steam, so I was wondering why I wasn't able to see the same thing at that moment.

Thanks a bunch for your help!

Andrew Breslin
Andrew Breslin
10,177 Points
Andrew Breslin
Andrew Breslin
10,177 Points

I had the same problem, and could not figure out why I had run out of steam, so to speak. As Justin pointed out, the boat class was set to opacity: zero in the download of the main.css file.

The reason this was a bit confusing is that everything else in that file exactly matches what Guil had in his initial file at the very beginning of the demo. He changes the boat class opacity to zero later in the demo to make a point and shows how this makes the steam disappear. But in the download, this has already been changed to zero. With this exception, everything else matched exactly how Guil had it at the outset, so it was easy to miss. All working now. Full steam ahead!