I'm using z-index to make content inside (.under) appear above the image (.img img) on hover and I'm getting blinking. I don't know how to stop the blinking, anybody? http://themeforward.com/demo2/portfolio/


My CSS:

#portfolio_content .img a {
	z-index:110!important
}
#portfolio_content .img a:hover { }
#portfolio_content .img {
	display:block;
	float:left;
	height:210px;
	margin:0 35px 35px 0!important;
	overflow:hidden;
	padding:0;
	width:307px
}
#portfolio_content .img img {
	display:block;
	position:absolute!important;
	z-index:100!important
}
#portfolio_content .img img:hover { z-index:0!important }
#portfolio_content .img .title, #portfolio_content .img .title a {
	font-size:22px;
	width:307px!important;
	height:210px!impotant;
	float:left!important;
	text-align:center;
	margin:100px 0 10px 0;
	position:relative!important
}
.desc {
	font-size:13px;
	display:block;
	text-align:center!important;
	margin:0 auto!important;
	width:307px
}
.under { width:307px; height:210px; background:#EEE; overflow:hidden; display:block }
.under:hover { z-index:100!important }

My markup:

<a href="<?php the_permalink() ?>">
<span class="img">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thmb-portfolio' ); } ?>

<span class="under">

<!-- Excerpt title -->
<span class="title"><?php the_title(); ?></span>

<!-- Excerpt description -->
<span class="desc">
<?php echo get_post_meta( get_the_ID(), 'port_excerpt', true ); ?>
</span>
</span>
</span>
</a>