Question

这是我目前在我们网站的各个部分中使用的图像替换代码，用于进行悬停图像替换。我的问题是如何在现有代码中添加轻松输入.5或在样式表中添加替代CSS代码以在整个网站中使用。我希望在图像之间创建更平滑的过渡。预先感谢您的帮助。

<img src="https://gingerhippo.com/wp-content/uploads/2018/04/GingerHippo-Search-Services-3-1.jpg" 
     onmouseover="this.src='https://gingerhippo.com/wp-content/uploads/2018/04/Ginger-Hippo-Search-Services-1-1.jpg'" 
     onmouseout="this.src='https://gingerhippo.com/wp-content/uploads/2018/04/GingerHippo-Search-Services-3-1.jpg'"
>

在我们的主页上，您将看到7个不同的图像悬停替换图像，所有图像都没有过渡时间。我已经设法为博客和行业文章页面上的按钮创建了背景转换，但是无法复制主页图像的过程。

再次感谢您的帮助。我已经坚持了几个月。

Answer 1

将两个图像放置在外部块元素中。

<section>
    <img class="bottom" src="img.png">
    <img class="animation" src="img-2.png">
</section>

外部将是相对的，内部将是绝对的。

section {
  position: relative;
}

section img {
    position: absolute;
}

创建动画并将其应用于顶部元素。

.animation {
    animation-name: fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-direction: alternate;
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

现在，如果您要编辑动画效果，请在.animation中进行更改。

来源：https://www.taniarascia.com/crossfade-between-two-images-with-css-animations/

Answer 2

您也可以使用此Example

var $this = $(this);
  var newSource = $this.data("alt-src");
  $this.data("alt-src", $this.attr("src"));
  $this.attr("src", newSource);
};

$(function() {
  $("img.demo-img").hover(sourceSwap, sourceSwap);
});

<img class="demo-img" data-alt-src="image-2.png" src="image-1.png" />

如何为HTML中的图像悬停替换创建轻松导入功能？

2 个答案: