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%}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.