Utilisation des propriétés ‘Filter’ et ‘Opacity’
Un petit bout de code ne vaut-il pas mieux qu’une grande explication
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
#container { width: 620px; margin: 0 auto 15px auto; display: block; border-radius: 5px; padding: 6px 6px 5px 6px; border: solid 1px #ddd; border-bottom: solid 1px #ccc; background-image: url(../images/a_pied-sketch.png); background-repeat: no-repeat; background-position: 6px 6px; -webkit-transition: -webkit-box-shadow 0.9s ease-in; -moz-transition: box-shadow 0.9s ease-in; -o-transition: box-shadow 0.9s ease-in; transition: box-shadow 0.9s ease-in; } #container:hover { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset; -webkit-transition: -webkit-box-shadow 0.9s ease-in-out; -moz-transition: box-shadow 0.9s ease-in-out; -o-transition: box-shadow 0.9s ease-in-out; transition: box-shadow 0.9s ease-in-out; } #images { width: 620px; background-color: transparent; } #images a img { opacity: 0; border: none; -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity = 0); -webkit-transition: opacity 0.9s ease-in-out; -moz-transition: opacity 0.9s ease-in-out; -o-transition: opacity 0.9s ease-in-out; transition: opacity 0.9s ease-in-out; } #images a:hover img, #images a:focus img { opacity: 0.9; -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity = 90); } |
Créé par David LAURENT | TMI | Webinnov™
Aucun commentaire