#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

/* @group Attachments table */
table.attachments caption {
  display: none;
}
table.attachments {
  border-color: #CCC;
  border-width: 1px;
  border-style: solid none none solid;
  width: auto;
}
table.attachments thead { border: 1px solid #CCC }
table.attachments td {
  line-height: 24px; padding: 0;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
table.attachments tr {
  border-right: 1px solid #CCC;
}
table.attachments td a {
	line-height: 24px;
	padding: 0 26px;
	background-position: 5px;
	background-repeat: no-repeat;
}
table.attachments th {
  background-color: #F2F2F2;
  font-weight: normal;
  font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 77%;
}
table.attachments td.size {
  padding: 0 5px;
  font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 77%;
  color: #404040;
  font-style: normal;
}
/* @end */
/* @group Mime-type icons */
.pdf a, .application-pdf a {
  background-image: url(images/icon-pdf.gif); }
.jpeg a, .jpg a, .png a, .gif a {
  background-image: url(images/icon-image.png); }
.eps a, .application-postscript a {
  background-image: url(images/icon-postscript.png); }
.html a, .text-html a {
  background-image: url(images/icon-html.gif); }
.qt a, .video-quicktime a {
  background-image: url(images/icon-quicktime.gif); }
.ical a, .text-calendar a {
  background-image: url(images/icon-ical.gif); }
.dl a {
  background-image: url(images/icon-download.gif); }
.dmg a, .application-x-diskcopy a {
  background-image: url(images/icon-dmg.gif); }
.zip a, .application-zip a {
  background-image: url(images/icon-zip.gif); }
.audio a, .audio-mpeg a {
  background-image: url(images/icon-audio.gif); }
.website a {
  background: url(images/icon-website.gif) left center no-repeat;
  margin: 0; padding: 2px 0 2px 25px; line-height: 25px; }
.doc a, .msword a {
  background-image: url(images/icon-doc.png); }
.txt a  {
  background-image: url(images/icon-txt.gif); }
/* @end */

<style type="text/css">
.img
{
display: inline-block;
position: relative;
text-decoration: none;
}

.img img
{
border: 1px solid #cccccc;
padding: 10px;
}

img:hover { border-color: #aaaaaa; }

.img div
{
background: #666666;
color: #ffffff;
opacity: .70;
padding: 3px 0px;
position: absolute;
left: 0px;
bottom: 25px;
text-align: center;
width: 100%;
}

.img:hover div { opacity: .90; }
</style>

<a href="#" class="img">
<img src="http://www.nealgrosskopf.com/images/gallery/thumbs/100_2640.jpg">
<div>Green Plants</div>
</a>

:focus{
	-moz-outline-style: none;
}

/*********************************************
/* add this to a javascript file in the theme 
/*********************************************/

sfHover = function() {
  var sfEls = document.getElementById("nav").getElementsByTagName("li");
  
  for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
      this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
  }
}

if (window.attachEvent) window.attachEvent("onload", sfHover);

/*********************************************
/* import into any page template files
/*********************************************/

<script type="text/javascript" src="hover.js"></script>

/*********************************************
/* replace "footer" with id of menu wrapper 
/*********************************************/

#footer ul {
  margin: 0;  
  padding: 0;
  list-style: none;  
}

#footer a {
  display: block;
  width: 10em;
}

#footer li {
  float: left;
  width:  10em;
}

#footer li ul {
  position: absolute;
  width: 10em;
  left: -999em;
}

#footer li:hover ul {
  left: auto;
}

#footer li:hover ul, #footer li.sfhover ul {
  left:auto;
}

*:first-child+html #footer {
height: 1%;
}
*:first-child+html #footer li {
height: 1%;
}

your wp-content/themes/yourthemes/images directory, open up your index.php file, find the loop and make sure that each post is embedded throught a <div class=”post”> tag. This is the case on most themes.Then, edit your style.css file. Find the following line:

.post {

background: transparent url(images/yourimage.jpg) no-repeat bottom;

border-collapse: collapse;

a:link,a:visited,a:hover, a:active{
text-decoration:none;
}
 
a:hover{
text-decoration:underline!important;
}

/* place a comment here */

<script type="text/javascript">
	// create a number with Date and getTime
	var x = new Date().getTime();
	
	// create a variable with the path to your css file?=
	var css="css/styles.css?="+x;
	
	// write the link tag with new css var
	document.writeln('<link rel="stylesheet" type="text/css" href="'+css+'">');
</script>
<noscript><link rel="stylesheet" type="text/css" media="all" href="css/styles.css" /></noscript>