Fadez une image dans une autre en utilisant css ou jquery

Je dois pouvoir disparaître dans une deuxième image au-dessus de l'image initiale sur le vol stationnaire. Je dois vous assurer que la deuxième image n'est pas visible initialement jusqu'à ce qu'elle s'efface. L'autre remarque importante est que l'une ou l' autre des images devrait disparaître entièrement à tout moment. J'ai essayé plusieurs approches telles que l'utilisation de 1 image, 2 images, jquery animate et css transition.

J'ai lu qu'il est possible d'animer un changement d'attribut en utilisant jquery? Si cela est vrai, comment puis-je animer le changement de 'src' en img en utilisant jquery?

$(".image").mouseenter(function() { var img = $(this); var newSrc = img.attr("data-hover-src"); img.attr("src",newSrc); img.fadeTo('slow', 0.8, function() { img.attr("src", newSrc); }); img.fadeTo('slow', 1); }).mouseleave(function() { var img = $(this); var newSrc = img.attr("data-regular-src"); img.fadeTo('slow', 0.8, function() { img.attr("src", newSrc); }); img.fadeTo('slow', 1); });

C'est ce que j'utilise actuellement. C'est le plus proche que j'ai trouvé. Mais vous pouvez voir le changement d'image qui n'est pas souhaitable.

Utilisation d'un seul élément html avec des images d'arrière-plan

HTML – ne devient plus simple que cela

 <div id="imgHolder"></div>

CSS

 #imgHolder { width: 200px; height: 200px; display: block; position: relative; } /*Initial image*/ #imgHolder::before { content:""; top: 0; left: 0; bottom: 0; right: 0; position: absolute; background-image:url(http://placehold.it/200x200); -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; z-index:10; } #imgHolder:hover::before { opacity:0; } #imgHolder::after { content:""; background: url(http://placehold.it/200x200/FF0000); top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }

Démonstration

OU si vous souhaitez utiliser des balises d'image …

Voler directement à partir de: http://css3.bradshawenterprises.com/cfimg/

HTML

 <div id="cf"> <img class="bottom" src="pathetoImg1.jpg" /> <img class="top" src="pathetoImg2.jpg" /> </div>

CSS

 #cf { position:relative; height:281px; width:450px; margin:0 auto; } #cf img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img.top:hover { opacity:0; }

Il existe également d'autres exemples dans le lien, mais cela vous permettra de commencer.

Opacité finale

Vous avez mentionné que vous ne voulez pas que l'image initiale disparaisse. Pour ce faire, modifiez l' opacity:0 à l' opacity:0.5 ou quelque chose de similaire. Vous devrez expérimenter cette valeur pour obtenir le résultat souhaité.

Démo avec une opacité finale de 0,8

Dimensions de l'image dynamique

Je pense que vous seriez coincé avec la version de deux images pour cela si vous utilisez simplement CSS. HTML est le même.

CSS

 #cf { position:relative; } #cf img { -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img.bottom { z-index:-1; opacity:0; position:absolute; left:0; } #cf:hover img.top { opacity:0.8; } #cf:hover img.bottom { display:block; opacity:1; }

Démonstration