Div visibile solamente al passaggio del mouse

darkf3d3

Div visibile solamente al passaggio del mouse

Ho una div contenente testo in sovraimpressione ad un'immagine, la div è impostata con visibility:hidden, vorrei far si che al passaggio del mouse la div diventi visibile per poi tornare invisibile quando ci si sposta.

Ho provato in questo modo ma non funziona, credo di aver sbagliato da qualche parte ma non capisco dove:
[HTML]<div class="over-image-class "id="over-image <?php the_ID(); ?>" onMouseOver="document.getElementById('over-image <?php the_ID(); ?>').style.display='block';" onMouseOut="document.getElementById('over-image <?php the_ID(); ?>').style.display='none';">[/HTML]

Idee?

phpexec

Includi jQuery, poi se ho capito bene e gli elementi sono strutturati così

aggiungi

darkf3d3

Ho provato ad usare i tuoi codici ma sembrerebbe che non funzioni, jQuery dovrebbe essere già incluso in Wordpress giusto?

PS: ho tolto lo spazio da "fadeOu t();"

phpexec

Devi mettermi la struttura dei div (di entrambi), sia quello quando ci vai sopra col mouse, sia quello al suo interno che dovrà apparire (e che all'inizio è nascosto, no?).
Mettimi solo le classi e dimmi cosa vuoi far apparire, giusto per intenderci
<div class="sempre_visibile">
<div class="visibile_quando_vai_sopra_su_sempre_visibile"></div>
</div>

Comunque si, il jQuery di solito è incluso in Wordpress

darkf3d3

Quello che sto cercando di fare è creare una galleria di immagini che funziona in modo simile a quella di facebook, al caricamento della pagina vengono visualizzate tutte le immagini e passandoci sopra il mouse viene visualizzata una div semitrasparente con nome e altre informazioni.

Questo è il codice che visualizza le immagini (ho copiato solo il contenuto del ciclo while:
[HTML]

                        <!-- div semitrasparente pos sopra le immagini -->
                        <div class="over-image-class "id="over-image <?php the_ID(); ?>">
                        <a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'>
                        <h2><?php echo substr(the_title('', '', FALSE), 0, 33); ?></h2>
                        </a>
                                        </div>
                        <!-- immagini -->
                        <?php if(has_post_thumbnail()): ?>
                        <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'widget-image'); ?>
                        <div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'>
                        <img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $image[0]; ?>&w=220&h=190" alt="<?php the_title(); ?>" width='220' height='190' /></a><?php echo $icon; ?></div>
                        <?php else: ?>

                        <div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'>
                        <img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php bloginfo('template_directory'); ?>/images/thumbnail.png&w=220&h=190" alt="<?php the_title(); ?>" width='220' height='190' /></a><?php echo $icon; ?></div>
                        <?php endif; ?>

[/HTML]

Stile:
[HTML]
/* stile visualizzazione a griglia /
.block-item-grid {
position:relative;
float:left;
width:227px;
border:none;
/ padding: 14px 0 6px 0; */
margin:0 4px 2px 4px;
}
.block-item-grid .block-meta { font-size: 12px; }
.block-item-grid h2 { font-size:18px;margin-bottom:2px;color:#fff;text-align:center }
.block-item-grid h2 a { color:#fff;text-decoration:none }
.block-item-grid img {
border:3px solid #eaeaea
}
.block-item-grid img:hover {
border:3px solid #ff6600
}
.over-image-class {
position:absolute;
top:165px;
left:5px;
width:220px;
height:30px;
line-height:30px;
background:transparent url(.../bg-feat.png) repeat;
text-decoration:none;
z-index:5;
}[/HTML]

Forse ti è più comodo vedere ciò di cui parlo direttamente dal blog... ti basta andare sul link in firma.