Fondu d’une image dans une autre en utilisant css ou jquery

Je dois pouvoir insérer une deuxième image au-dessus de l’image initiale en survol. Je dois m’assurer que la deuxième image ne sera pas visible au départ jusqu’à ce qu’elle apparaisse en fondu. L’autre remarque importante est qu’aucune des images ne doit disparaître complètement à tout moment. J’ai essayé plusieurs approches telles que l’utilisation d’une image, de 2 images, de jquery animate et de la transition css.

J’ai lu qu’il est possible d’animer un changement d’atsortingbut en utilisant jquery? Si cela est vrai, comment pourrais-je animer le changement de ‘src’ dans 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 eu. Mais vous pouvez voir que l’image change, ce qui n’est pas souhaitable.

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

HTML – ne devient pas plus simple que cela

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émo

OU si vous voulez utiliser des balises d’image …

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

HTML

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; }

Le lien contient également de nombreux autres exemples, mais cela vous aidera à démarrer.

Opacité finale

Vous avez mentionné que vous ne voulez pas que l’image initiale disparaisse complètement. Pour ce faire, changez l’ opacity:0 en 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

Tailles d’image dynamics

Je pense que vous serez coincé avec la version à deux images pour cela si vous utilisez seulement 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émo