Affichage des délais de superposition d'images CSS: aucun à afficher: bloc [dupliquer] - html, css, css3

J'ai une image avec un bouton dessus. Le bouton ne sera visible, si je flotter sur l'image.

Je le change de display:none à display:block et il apparaît instantanément.

Je voudrais retarder l’apparition de ce bouton de 1 seconde ou le rendre linéaire, donc c'est une transition en douceur. J'ai vu le CSS3 transition et appliqué ceci, en utilisant opacity, aussi (0.0 to 1.0).

Cela ne semble pas fonctionner. Qu'est-ce que je rate? Je ne pense pas que -webkit des propriétés spécifiques en sont la raison.

Consultez mon exemple fiddle.js:

Fiddle.js: Exemple de transition de superposition d'image en survol

Je vous remercie!

Réponses:

Voici un travail violon

J'ai utiliser all au lieu de opacity, mais dans tous les cas, vous pouvez également changer cela.

.image_controls{
position: absolute;
left: 0;
top:5px;
opacity:0.0;


}

.image_wrapper:hover .image_controls {
-webkit-transition: all 2s ease;
transition: all 2s ease;
display: block;
opacity:.9;

}

Vous pouvez utiliser jQuery "s fadeIn() / fadeOut(). Comme vous avez tagué javascript et jquery, je suppose que l'utilisation de JS ne vous inquiéterait pas, non?