onmouseover Causing Blinking

I'm using onmouseover, the z-index property, and a set of CSS classes to display text hidden behind an image. However, my images blink rapidly when hovered over. Can anybody help me out? (This is in a wordpress theme)

The problem is in this line, in the onmouseout... I just don't know how to modify it to fix the problem:

<span class="displayer" onmouseover="this.className='hidden'" onmouseout="this.className='displayer'">

My markup:

    <?php get_header(); ?>

<div id="container">
<div id="portfolio_content">

<!-- Grab posts -->
<div id="portfolio_wrap">
<?php while (have_posts()) : the_post(); ?>  

<!-- Get the image -->
<a href="<?php the_permalink() ?>">


<span class="img">

<span class="displayer" onmouseover="this.className='hidden'" onmouseout="this.className='displayer'">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thmb-portfolio' ); } ?>
</span>


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

<!-- Excerpt description -->
<span class="desc">
    <?php my_excerpt('short'); ?>
</span>
</span>
</a>


<?php endwhile; ?>

<!-- Next/Previous Posts -->
<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

</div>
</div>
</div>
</div>

<?php get_footer(); ?>

My CSS

#portfolio_content ul {
    list-style:none
}
#portfolio_content .img a {
    color:#444;
    z-index:110!important
}
#portfolio_content .img a:hover { }
#portfolio_content .img {
    display:block;
    float:left;
    height:250px;
    margin:0 35px 35px 0!important;
    overflow:hidden;
    padding:0;
    width:352px
}
#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:352px!important;
    height:250px!impotant;
    float:left!important;
    text-align:center;
    margin:100px 0 10px 0;
    position:relative!important;
    color:#444
}
.desc {
    font-size:13px;
    display:block;
    text-align:center!important;
    margin:0 auto!important;
    width:352px;
    color:#444
}
.displayer {
    display:block;
    background:#1a1a1a;
    overflow:hidden;
    width:352px;
    height:250px;
    z-index:900!impor开发者_运维技巧tant
}
.hidden { display:none }

Hiding an element that has the mouse pointer over it causes onmouseout to fire, displaying the element again, which hides the element, etc etc. You should probably attach your "re-show the div" event to something else, like a click for example.

Better example: When you image div is hidden by mousing over, does another element take its place? You mention a hidden text element behind it. Try attaching the "Re-show div" handler to the onmouseout of the text div, while leaving the "hide div" handler where it is (attached to the onmouseover of the image div).

Try using CSS sprites as most of the time a hover image flicker is caused by the time it takes for the browser to load the image when called by the hover. A sprite will load all of the images at once and eliminate the flicker. Css sprites