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
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
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
Vous devez vous connecter pour publier un commentaire.
Firefox 4+ est le seul navigateur qui prend en charge la transition des pseudo-éléments tels que
:before
et:after
.Source: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
J'ai accepté votre réponse 🙂
OriginalL'auteur tw16
Les transitions CSS sont encore au stade expérimental dans WebKit, donc il est probable que vous avez touché quelques bords cas de bug impliquant les ::après le pseudo-sélecteur. Je vous suggérons d'éviter purement et simplement et seulement de la transition
border-color
à la place. Cela a bien fonctionné dans Chrome et Safari:OriginalL'auteur Matthew Caruana Galizia