Effet survol image

Killian Aller
Javascript

Bonjour, je souhaiterais créer un système qui permet de créer un effet particulier lorsque l'on survol une image.

Je vous ais mis une image pour que vous comprenez mieux.
J'aimerais que lorsque l'on survol l'image, le bandeau noir s'élève avec un effet slideDown et prenne la totalité de l'image. Le texte lui s'élevera avec le même effet mais que jusqu'au milieu de l'image.
Je vous ais mis une autre image ou le cadre bleu représente le bandeau.

Voici donc ce que je souhaiterais réaliser mais je ne sait absolument pas comment faire sachant que je suis pas très doué en javascript.
Si vous avez des conseils ou un plug in à me donner, n'hésitez pas.

Je remercie donc toutes les personnes qui pourront m'aider et merci d'avoir pris le temps de me lire.

2 réponses

betaWeb
Réponse acceptée

Salut,

Je pense qu'une petite recherche sur Google avec des mots clés comme "img hover effect css" t'aurait mis sur la voie.
Voici une façon de faire (entres autres) :
Il faut placer ton image dans un conteneur (une div par exemple), puis un paragraphe (balise p) contenant le texte en position absolute. Lors du hover sur le conteneur, tu changes la position de ton paragraphe par rapport au top du conteneur et le tour est joué ;)

CSS

.conteneur{
    position: relative;
    width: 250px; height: 250px; /* Tu adaptes selon tes besoins */
    overflow: hidden; /* très important */
    cursor: pointer;
     z-index: 1;
}
.conteneur img{
    display: inline-block;
    width: 100%; height: 250px;
}
.conteneur p{
    position: absolute;
    top: 220px; right: 0; left: 0;
    width: 100%; height: 250px;
    z-index: 3;
    transition: top 0.3s;
}
.conteneur:hover p{ top: 0; }

C'est vague, c'est juste pour te donner une indication je n'ai pas testé mon code ;)

EDIT: Je t'ai fait un petit exemple ici si ça peut t'aider: http://codepen.io/betaweb/pen/YyrNPL

Killian Aller
Auteur

Bonjour betaWeb, merci beaucoup pour votre réponse. J'ai pu adapter votre code dans mon cas et ça marche parfaitement. Merci