A CSS class as link with image and text inside it-I have done it !

After hours of hectic try,at last I have done this.

A css class with text and image thumbnail inside it is possible but I wanted to make the whole class linked.

This feature I saw in some websites,I liked it.I was planning to use this in my post sitemaps.

A thumbnail image plus a title and some text-link to a specific post that would be looking great.

CSS class as link-how to do it.

Features:

Html table is used-I had bitter experience with complete css application containing images.The clss had to be declared with width and height ,again width and height value declared,show different view in different explorer.

Table is perfect.No need to declare the width and height of the class or the image.

Demo:

Demo:

Whole class as link how to do this

Move or hover cursor over this image or text or class area-see the effect.

The whole class is used as a link.

[html]

<table cellpadding="0" cellspacing="0" class="ta" style="float: left; text-align: left;">
<tbody><tr><td style="text-align: left;">
<a href="http://1.bp.blogspot.com/-bUOtlDwVjLk/Tc9drceqzdI/AAAAAAAAF3Y/TPyLyuYtzEg/s200/funny+internet+www+image.jpg" imageanchor="1"><img border="0" src="http://1.bp.blogspot.com/-bUOtlDwVjLk/Tc9drceqzdI/AAAAAAAAF3Y/TPyLyuYtzEg/s200/funny+internet+www+image.jpg" style="margin: 0px 0px 0px 0px;" /><br/>
<b>Whole class as link</b><br/>
how to do this</a>
</td></tr>
</tbody></table>

[CSS]

<style type="text/css">
.ta{
border:1px solid #D8D8D8;
background:#E6E6E6;
padding:8px 8px 8px 8px;
}

.ta a{
text-decoration:none;
color:#151515;
}

.ta:hover{
color:white;
background:#250517;
}

.ta a:hover{
color:white;
}

.ta b{color:black;}
.ta:hover b{color:white;}

.ta img
{
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
border:1px solid #D8D8D8;
margin-bottom:5px;
}

</style>