[Résolu] Image active au passage de la souris

Bonjour à tous,
Je souhaite faire apparaitre un filtre noir et un texte au passage de la souris sur des images comme vous pouvez le voir sur l'image ci-dessous :

Es-ce possible de réaliser cet effet en HTML5 et CSS3 ?

PS: J'utilise le CMS WordPress.

Merci de votre aide

Cordialement
Modifié par Guillaume15 (20 Feb 2014 - 09:16)

Bonjour,

Tu peux essayer un truc comme ça par exemple :
(J'ai pas testé le code donc je ne te garantis rien)

<div class="image-container">
    <img src="ton-image.jpg" alt="Ton image" />
    <p>Calendrier des compétitions</p>
</div>

.image-container:hover {
    position: relative;
    background: rgba(0, 0, 0, .5);
}

.image-container img {
    position: relative;
    z-index: -1;
}

.image-container p {
    display: none;
}

.image-container:hover p {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
}

Modifié par Raphi (20 Feb 2014 - 09:29)

Merci beaucoup de ton aide

Bonne journée