Lets Flip These Button to make it Look like Flash.

So, I came up with a Idea of Making a Image in photoshop The desired width and height. These Images are going to be for my photoGallery.How can i make the Images Flip.What i mean by Flip is Making it looks like Flash But its not really Flash I want to do this in CSS & html.Im trying to make the images a color of #333333.When Someone Move the mouse over The image The Image Appears and when they Move away the Image goes Back to Regular and its not shown anymore. How can i do this?
Wouldnt it just be a Basic Hover?


Here is my html:
[highlight="HTML4Strict"]

<ul class="gallery">
<li><a href="#"><em></em><img src="http://i38.tinypic.com/4jnwb7.png" alt="" /></a></li>
<li><a href="#"><em></em><img src="http://i38.tinypic.com/4jnwb7.png" alt="" /></a></li>
<li><a href="#"><em></em><img src="http://i38.tinypic.com/4jnwb7.png" alt="" /></a></li>
<li><a href="#"><em></em><img src="http://i38.tinypic.com/4jnwb7.png" alt="" /></a></li>






</ul>


Here is my CSS:

[highlight="CSS"].gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 15px;
padding: 0;
float: left;
position: relative;
width: 150px;
height: 150px;
}

.gallery a {
text-decoration: none;
color: #666;
}

.gallery em {
width: 150px;
height: 150px;
background-color:333333
display: block;
position: absolute;
text-align: center;
font: 100%/100% Georgia, "Times New Roman", Times, serif;

 

I think you are asking for flat hovers... At first I was thinking combine all your images down to a single file, but the way I see it your non-hovered state is presentational, while your hovered images are content - as such I'd want the non-hovered images in the markup as IMG tags as you were doing it.

My solution to this would be to make the anchors float left (and therin display:block) fixing their size and setting overflow:hidden on them. You can then put a top margin equal to the height of our image area on each image removing them from view - then strip the margin to make your hover state.

http://www.cutcodedown.com/for_others/blktallos/template.html

as with all my examples the directory is unlocked so you can grab the gooey bits

http://www.cutcodedown.com/for_others/blktallos

MIND YOU, unlike most of my examples this has not been tested for IE 5 or 6, though it works fine in IE7, FF 3, Opera 9 and Safari. - There's nothing there that should cause IE6 to mess up, but you never know.