How do I prevent CSS Hover transitions on images from showing up when I load my page?

You might try setting the initial opacity of the <p> tags inside the status divs to 0, and adding the transition property to that element like this:

.status p {
opacity: 0;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}

Then, add a :hover pseudo-class like this:

.status:hover p {
opacity: 1;
}

Notice that the :hover is applied to the containing element (.status) but the rule applies to the <p> inside that element. In other words, this rule says "when you hover over the status element make the opacity of any paragraphs inside that element 1." You'll also need to remove the opacity from the .status rule and the .status:hover rule.

Also, the <title> of your page is "Lynda.com | Creating a Responsive Web Design". You might want to change that.

Thanks. I did what you advised. The problem still exists in Chrome. I'm not sure if it was happening in IE and Mozilla before, but it's solved in those browsers. What do you think the issue with Chrome might be?