jonraasch/animated-image.html

## animated-image.html
<!doctype html>
<html lang="en">
<head>


<title>Animated Image (example)</title>

<style type="text/css">

body {
    font-family: Georgia, serif;
}

#main-wrapper {
    width: 900px;
    margin: 0 auto;
}

.post-wrapper {
    position: relative;
    padding-left: 240px;
}

.post-image {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #bbb;
    -webkit-transition: background-color 400ms ease-in;
    -moz-transition: background-color 400ms ease-in;
    transition: background-color 400ms ease-in;
}

.post-title {
    color: #037072;
    font-size: 2em;
    font-weight: normal;
    padding-bottom: .3em;
    border-bottom: double #bbb;
    cursor: pointer;
    -webkit-transition: color 400ms ease-in;
    -moz-transition: color 400ms ease-in;
    transition: color 400ms ease-in;
}

/* add the hover states */

.post-title-wrapper:hover .post-image {
    background-color: #f04e36;
}

.post-title-wrapper:hover .post-title {
    color: #579fa1;
}

</style>

</head>

<body>

<div id="main-wrapper">
    <div class="post-wrapper">
        <div class="post-title-wrapper">
            <img src="knockout-image.png" class="post-image" alt="Knockout Image" title="This is a knockout PNG" />

            <h2 class="post-title">
            This is the title you hover over
            </h2>
        </div>

        <p>In the tumultuous business of cutting-in and attending to a whale, there is much running backwards and forwards among the crew. Now hands are wanted here, and then again hands are wanted there. There is no staying in any one place; for at one and the same time everything has to be done everywhere. It is much the same with him who endeavors the description of the scene. We must now retrace our way a little. It was mentioned that upon first breaking ground in the whale's back, the blubber-hook was inserted into the original hole there cut by the spades of the mates. But how did so clumsy and weighty a mass as that same hook get fixed in that hole?</p>
    </div>
</div>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>


	<title>Animated Image (example)</title>

	<style type="text/css">

	body {
	font-family: Georgia, serif;
	}

	#main-wrapper {
	width: 900px;
	margin: 0 auto;
	}

	.post-wrapper {
	position: relative;
	padding-left: 240px;
	}

	.post-image {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #bbb;
	-webkit-transition: background-color 400ms ease-in;
	-moz-transition: background-color 400ms ease-in;
	transition: background-color 400ms ease-in;
	}

	.post-title {
	color: #037072;
	font-size: 2em;
	font-weight: normal;
	padding-bottom: .3em;
	border-bottom: double #bbb;
	cursor: pointer;
	-webkit-transition: color 400ms ease-in;
	-moz-transition: color 400ms ease-in;
	transition: color 400ms ease-in;
	}

	/* add the hover states */

	.post-title-wrapper:hover .post-image {
	background-color: #f04e36;
	}

	.post-title-wrapper:hover .post-title {
	color: #579fa1;
	}

	</style>

	</head>

	<body>

	<div id="main-wrapper">
	<div class="post-wrapper">
	<div class="post-title-wrapper">
	<img src="knockout-image.png" class="post-image" alt="Knockout Image" title="This is a knockout PNG" />

	<h2 class="post-title">
	This is the title you hover over
	</h2>
	</div>

	<p>In the tumultuous business of cutting-in and attending to a whale, there is much running backwards and forwards among the crew. Now hands are wanted here, and then again hands are wanted there. There is no staying in any one place; for at one and the same time everything has to be done everywhere. It is much the same with him who endeavors the description of the scene. We must now retrace our way a little. It was mentioned that upon first breaking ground in the whale's back, the blubber-hook was inserted into the original hole there cut by the spades of the mates. But how did so clumsy and weighty a mass as that same hook get fixed in that hole?</p>
	</div>
	</div>

	</body>
	</html>