Discussion :

[dnimas]

Slt à tous j'aimerai réaliser l'effet sur l'image ci-dessus en javascript. J'ai une div à l’intérieur de laquelle il y'a un titre, une image et un bouton et lorsqu'on survol la div avec la souris l'effet sur l'image se produit: un fond transparent avec du texte au dessus. le plus compliqué dans la chose c'est que l'effet commence à partir de l'image pour remonté jusqu'au titre sans débordé l'image. J'ai beau cherché fatiguer j'ai pas trouvé comment réaliser cela. Svp j'ai besoin d'aide suis débutant en javascript.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div>
  <h4> titre ici </h4>
  <img src="http://source/image" alt="" />
  <input type="button" value="valider">
</div>

[SpaceFrog]

Plusieurs façons d'y arriver

tu peux avoir un div avec un background image et jouer avec le css pour faire remonter le contenu du div
ou avoir deuxs divs imbriquées et jouer du margin top de la seconde ...

Avec jquery par exemple
https://jsfiddle.net/6d4or7gn/

on peut rajouter un easing ..
https://jsfiddle.net/6d4or7gn/2/



sinon avec les animations css ...

[NoSmoking]

Bonjour,
ce genre d'effet se gère très facilement en pur CSS en jouant sur l'animation de la propriété top du titre à afficher.

Sur base du HTML suivant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div>
  <figure>
    <img class="image" src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_livres_css_old.gif" alt="logo_livres_css_old.gif"></a></li>
    <figcaption><h1>Livres CSS</figcaption>
  </figure>
  <button>...</button>
</div>

et en appliquant le CSS ci dessous

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
figure {
  position: relative;
  overflow: hidden;
}
figcaption {
  position: absolute;
  top: 100%;
  transition: top .5s;
}
figure:hover figcaption {
  top: 0;
}
figure:hover img {
  opacity: .5;
}

tu ne devrais pas être loin de l’effet recherché.

[EDIT]

sinon avec les animations css ...

Tout à fait

[dnimas]

merci à tous