web-dev-qa-db-fra.com

Fondu CSS entre les images d'arrière-plan sur le survol

Est-il possible de faire ce qui suit?

J'ai un Sprite png transparent qui montre une image standard à gauche et une image pour l'état: survol à droite.

Existe-t-il un moyen de fondre l'image de l'image de gauche à l'image de droite: survolez en utilisant uniquement les transitions CSS3? J'ai essayé ce qui suit, mais ça ne marche pas:

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

Maintenant, ce qui précède anime l’arrière-plan, il panoramique l’image. Au lieu d’une casserole, j’aimerais un effet de fondu ou de dissolution.

UPDATE: J'ai fini par devoir créer deux éléments et simplement animer les opacités séparément. C'est un peu compliqué parce que je dois spécifier les marges exactes de chaque élément, mais je suppose que cela fonctionnera. Merci pour tout le monde aide :)

cssimagecss3fadecss-transitions
8
Jack

Les dernières nouvelles sur ce sujet:

Chrome 19 et les versions plus récentes prennent en charge les transitions d’image d’arrière-plan:

Démo: http://dabblet.com/Gist/1991345

Informations complémentaires: http://oli.jp/2010/css-animatable-properties/

4
Benjamin

Vous n'avez spécifié aucun code pour effectuer la transition réelle.

http://css3.bradshawenterprises.com/cfimg1/

Essayez ceci dans votre style de survol:

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out;
3
Joseph Hamilton

Jetez un oeil à ceci: http://jsfiddle.net/j5brM/1/

Je pense que cela répond à tous vos besoins et que c'est un peu moins compliqué.

1
Rauzippy

Je ne pense pas que vous puissiez modifier l'opacité des images d'arrière-plan en CSS, donc à moins que vous n'ayez deux éléments distincts pour l'image d'arrière-plan (un pour chaque position du Sprite) et que vous modifiiez l'opacité des deux en survol, Tu es coincé.

1
Paul D. Waite
li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}

devrait être 

li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}

je ne sais pas si cela résout le problème ou pas.

0
Joseph Marikle

Je sais que cela peut être un peu tard. Mais je luttais avec le même problème depuis longtemps. De plus, avec les sprites transparents, beaucoup de solutions ne semblent pas fonctionner.

Ce que j'ai fait est-ce

HTML

<div class="Sprite-one">
  <span class="foo"></span><span class="zen"></span>
</div>

CSS

.Sprite-one {
height: 50px
width: 50px
}
.Sprite-one span {
width: 50px;
height: 50px;
display: block;
position: absolute;
}
.foo, .zen { 
background-image: url(sprites.png) no-repeat;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.foo {
background-position: 0 0;
opacity: 1;
}
.zen {
background-position: -50px 0;
opacity: 0;
}
.Sprite-one:hover .foo {
opacity: 0;
}
.Sprite-one:hover .zen {
opacity: 1;
}

Css est une manière de css pure et a un peu de codage .. mais semble être le seul moyen que j’ai obtenu l’effet désiré! J'espère que les gens qui tombent aussi dessus peuvent trouver de l'aide!

0
Minum
<li class="image transition"></li>

css:
.image{
background-image: url("some/file/path.png");
background-repeat: no-repeat;
width: XXpx;
height: XXpx;
background-position: center center;
background-size: cover;
}

/* DRY */
.transition{
transition: background 0.6s;
-webkit-transition: background 0.6s;
}

.image:hover{
background-image: url("some/file/path_hoverImage.png");
}
0
user3242800