Cookie-Cutter Image Hover Effect
By Josh Stodola
All examples below are using the
same
image.
Example 1
HTML: <img src="josh.png" alt="Josh" /> CSS: img { background:#900; } img:hover { background:#c00; }
Example 2
Josh
HTML: <a href="#" title="Josh">Josh</a> CSS: a { background:#070 url(josh.png) no-repeat top left; display:block; height:90px; overflow:hidden; text-indent:-999em; width:200px; } a:hover { background-color:#090; }
Example 3
Josh
HTML: <h1 title="Josh"><span>Josh</span></h1> CSS: h1 { background:#006 url(josh.png) no-repeat; height:90px; position:relative; width:200px; } h1:hover { background-color:#00f; } h1 span { display:block; height:0; overflow:hidden; width:0; }
Download the Code
Back to the Original Blog Post
