Galerie CSS3 avec transition légendes

Rédigé par Daniel - 04 mai 2012

Un effet très cool sur une planche de miniatures photos, tout en CSS3!

Encore un effet d'inspiration Jquery que j'ai retranscrit en CSS3.
Pour cela, je vais mettre l'opacité à 0 par défaut sur le paragraphe, au survol il sera à 0.80.

.item .caption {
opacity: 0;
-ms-interpolation-mode: bicubic;
-webkit-transition:All 0.2s ease-in-out;
-moz-transition:All 0.2s ease-in-out;
-o-transition:All 0.2s ease;
transition:All 0.2s ease;}

Au survol cela donne

.item .caption:hover { opacity: 0.6; }

Enjoy!

Développement - Mots clés : CSS3

Les commentaires sont fermés.

Galerie CSS3 avec transition légendes

Un effet très cool sur une planche de miniatures photos, tout en CSS3!

.item .caption { opacity: 0; -ms-interpolation-mode: bicubic; -webkit-transition:All 0.2s ease-in-out; -moz-transition:All 0.2s ease-in-out; -o-transition:All 0.2s ease; transition:All 0.2s ease;}

.item .caption:hover { opacity: 0.6; }

.item .caption {
opacity: 0;
-ms-interpolation-mode: bicubic;
-webkit-transition:All 0.2s ease-in-out;
-moz-transition:All 0.2s ease-in-out;
-o-transition:All 0.2s ease;
transition:All 0.2s ease;}