Un efecto bastante sencillo que aportará claridad a nuestras web es el conocido “Image Filter and Show text on Mouseover”. Para hacer que nuestro theme WordPress lo luzca sólo debemos incorporar el siguiente código en la plantilla:

<?php
global $post;
$args = array( 'numberposts' => 8, 'category' => 1 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) :	setup_postdata($post); ?>
 <div class="hover-div">
 <?php if ( has_post_thumbnail()) { ?>
 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
 <?php the_post_thumbnail(array( 180,180 ), array( 'class' => 'bonita', 'title' => ''.get_the_title().'')); ?>
 </a>
 <?php } else { ?><a href="<?php the_permalink() ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="<?php the_title(); ?>" class="bonita" /></a> <?php } ?>
 <div class="hover-text"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e("Permalink to", "wopencart"); ?> <?php the_title(); ?>"><?php the_title(); ?></a></div>
</div>
 <?php
 endwhile; endif; /* loop ends */
 }
wp_reset_query(); // Restore global post data stomped by the_post().
?>
<br clear="all"/>

Y en nuestro CSS:

div.hover-div{ display:block; height:180px; width:180px; position:relative; margin:5px 7px; display:inline}

div.hover-div:hover .hover-text, div.hover-div:hover .hover-text a{ display:block; color:#fff}

div.hover-div:hover img{ opacity:0.6}

.hover-text{ display:none; opacity:0.9; clear:both; top:-80px; bottom:20px; background:#333; padding:10px; color:#fff; width:172px; position:absolute; z-index:2}
​
.hover-text a{color:#fff}

img.bonita, a img.bonita{margin-right:15px; margin-bottom:12px; border:1px #ddd solid; padding:5px; background:#fafafa; margin-left:0; -moz-border-radius:2px; -webkit-border-radius:2px; -khtml-border-radius:2px; border-radius:2px}

El efecto es este: http://jsfiddle.net/hueBt/1/

Contactar con Pedro J. Martín Villalba
Propietario de la marca comercial FCSITES (diseñador web freelance workaholic con +15 años de experiencia profesional). Aficionado a las artes marciales y conocido como "Formado Comprido" en el mundo de la capoeira. Autor del libro en español: "Ao som do berimbau: Capoeira".