Five Useful Interactive CSS/jQuery Techniques Deconstructed - Practical JavaScript Techniques - page 19

Notice in the demo how when the background color is set to orange, it starts to look more like

8

the real thing.

THE CODE

•

View the demo 9

First, let's do some basic mark-up:

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

< img src =" knockout-image.png " class =" post-image " alt ="" />
</ h2 >

< p > Some more text here. </ p >
</ div >

Here we include a post with a title, our knock-out image and a paragraph of text.

Next, let's set up some static styles:

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

}