CSS :après hover Transition

La structure HTML

<div id="small_gal">
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
</div>

Les images sont d'avoir dropshadows donc border n'est pas une solution, car il sera en dehors de l'image

CSS :après hover Transition

La frontière est d'avoir de transition et il fonctionne sur FF, mais pas dans chrome ou d'autres navigateurs

Voici le code que j'ai utilisé

#small_gal div:hover{cursor: pointer;}
#small_gal div:after {
    content: '';
    position: absolute;
    width: 112px;
    height: 81px;
    border: 3px solid #e27501;
    left: 9px; top: 9px;
    z-index: 9;

    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
#small_gal div:hover:after {
    opacity: 1;
}

Remarque:

#small_gal

est uniquement le conteneur
chaque image est enveloppé dans un div afin que nous puissions mettre en œuvre :après

Êtes-vous sûr que les transitions CSS sont encore implémenté dans les navigateurs que vous utilisez? quirksmode.org
Oui frontière effet de fondu fonctionne très bien sur mon firefox 6. Case en haut à droite 3 liens, ils travaillent dans tous les navigateurs.
En bas de vote, car le lien est mort
Votre lien est rompu.
oui le lien est cassé, je l'ai supprimé et ajouté d'autres détails

OriginalL'auteur Aamir Mahmood | 2011-09-05