I really want to employ the simple HTML/CSS of having a text overlay on an image on rollover. I've been playing around using the code from this page:

http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/

Here's what my CSS for this looks like at the moment:

span.text-content { background: rgba(0,0,0,0.5); color: white; cursor: pointer; display: block!important; height: 100%; left: 0; position: absolute; top: 0; width: 100%; opacity: 0; max-height: inherit!important; max-width: inherit!important;}

span.text-content span {font-size:14px!important; line-height: 30px!important; max-height: inherit!important; max-width: inherit!important; display: block!important; text-align: center; vertical-align: middle; }

a:hover span.text-content {opacity: 1;}

And the HTML:

<td width="19.7%" style="position:relative;"><a href="" style="outline:none;" class="product"><img border="0" alt="" src="images/SeptemberNewsletter_item1.jpg" width="128" height="128" style="display:block; background-color:#f7941e;color:#ffffff; font-family: Arial, Helvetica, sans-serif; font-size:14px; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;" class="set_image_650"><span class="text-content" style="display:none; font-size: 0; max-height: 0; max-width:0; overflow:hidden; line-height: 0; mso-hide: all;"><span style="font-family:Arial, Helvetica, sans-serif; display:none; font-size: 0; max-height: 0; max-width:0; overflow:hidden; line-height: 0; mso-hide: all;">Product Name</span></span></a></td>

Trying to adapt the code from the page above for email.

There's some inline-css in there to stop the text appearing in gmail and outlook and the sort.

It's clearly not working in email! But wanted to find out if I'm going about this totally the wrong way, using positioning and the sort to get the overlay to work. Is there an easier way? Anyone else trying this or succesful?