Effet de survol sur une image

Un Effet de survol sur  une image

Il existe une multitude de façons de créer un effet de hover sur une image, pour faire apparaître son titre par exemple, ou le titre du post lié.

Admettons que j’ai un caroussel carouFredSel (jquery) en home page : chaque post est représenté par son image à la une , et en passant la souris sur une image, son titre apparaît comme dans l’image ci dessous.

Capture

Chaque caroussel est englobé dans une section. Voici un exemple de code :

    <section class="archive">
                            <h2><a href="<?php bloginfo( 'url' ); ?>/category/word/">Les Tutos Word</a></h2>
                                <div class="list_carousel">
                                    <ul class="foo2">
                                            <?php $query = new WP_Query( array(
                                                'post_type' => 'post',
                                                'category_name' => 'word',
                                                'posts_per_page' => 8
                                            ) );
                                            while ($query->have_posts()) : $query->the_post(); ?>
                                             <li class="home in-depth"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail();?><h1 class="title"><?php the_title();?></h1></li>   
                                            <?php endwhile; 
                                               wp_reset_postdata();?>
                                        </ul>
                                    <div class="clearfix"></div>
                                <!-- prev and next button -->
                               <a id="prev" class="prev" href="#"><</a>
                                <a id="next" class="next" href="#">></a>
                                </div>   
                          
                        </section>

Voici maintenant le css appliqué à ma classe title pour que le titre du post apparaisse au survol de l’image.

.in-depth{position:relative;}
.in-depth h1{display:none;transition: all 0.5s ease;}
.in-depth:hover img{opacity:0.5;}
.in-depth:hover h1{color:#fff;display:block;position:absolute;bottom:10%;left:0;z-index:999;background:rgba(0,0,0,0.5);font-size:16px;text-align:center;width:100%}

Mis à jour le Par Copier coller | Dans CSS