La structure HTMLCSS: après vol stationnaire transition
<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 ont des dropshadows si border
est pas une solution, car il sera hors de l'image
La frontière est avoir une transition et ça marche bien sur FF mais pas sur chrome ou autres navigateurs
Voici le code que j'ai ont 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;
}
Note:
#small_gal
est que le récipient chaque image est enveloppé dans un div afin que nous puissions mettre en œuvre: après
Êtes-vous sûr transitions CSS sont même implémenté dans les navigateurs que vous utilisez? http://www.quirksmode.org/ – marcgg
Oui l'effet de fondu de frontière fonctionne bien sur mon firefox 6. Vérifiez en haut à droite 3 liens, ils fonctionnent dans tous les navigateurs. –
Down vote parce que le lien est mort –