mouseover_如何在WordPress的Mouseover上淡入图像

mouseover

Images increase user engagement on websites. This is why you need to optimize images, learn how to add beautiful image galleries, and fix any image issues on your site. There are many ways to make your images standout. One of them is using a fade effect on images. In this article, we will show you how to fade images on mouseover in WordPress.

图片可以增加用户在网站上的参与度。 这就是为什么您需要优化图像 ，学习如何添加精美的图像库以及修复网站上的任何图像问题的原因。 有很多方法可以使您的图像脱颖而出。 其中之一是对图像使用淡入淡出效果。 在本文中，我们将向您展示如何在WordPress的鼠标悬停时淡化图像。

Basically when the user brings their mouse over an image on your site, it will fade slightly. See the example screenshot below:

基本上，当用户将鼠标移到您网站上的图片上时，它会稍微消失。 请参见下面的示例屏幕截图：

First we will show you is how to add simple fade effect on images in your WordPress posts. We will be using CSS for that. All you need to do is copy and paste the following code in your theme or child theme’s style.css file.

首先，我们将向您展示如何在WordPress帖子中的图像上添加简单的淡入淡出效果。 我们将为此使用CSS 。 您需要做的就是将以下代码复制并粘贴到主题或子主题的 style.css文件中。

.post img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}

This CSS snippet will effect all images displayed in WordPress posts. However, there is a slight glitch in this snippet. When a user takes mouse over to an image, it instantly switches the opacity. This feels a bit rough, right? Lets make it a little smoother by adding CSS transition rules.

该CSS代码段将影响WordPress帖子中显示的所有图像。 但是，此代码片段中有一些小故障。 当用户将鼠标移到图像上时，它会立即切换不透明度。 感觉有点不对吧？ 通过添加CSS过渡规则，让它更加平滑。

.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

You can also reverse this effect by setting a lower default opacity for your images, and then easing into full opacity producing a glowing effect. All you need to do for that is use the following CSS in your stylesheet:

您还可以通过为图像设置较低的默认不透明度，然后减弱为完全不透明度以产生发光效果，来反转此效果。 您所需要做的就是在样式表中使用以下CSS：

.post img {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
.post img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Some of our users may not want to add this effect to all images in their posts. How about just featured images or post thumbnails? To add this effect to only your post thumbnails, you can use the default .wp-post-image class generated by WordPress for featured images. Simply replace .post img:hover with img.wp-post-image:hover.

我们的某些用户可能不希望将此效果添加到其帖子中的所有图像上。 只是精选图片或发布缩略图怎么样？ 要将这种效果仅添加到您的帖子缩略图中，可以使用WordPress生成的默认.wp-post-image类用于特色图片。 只需将img.wp-post-image:hover替换.post img:hover img.wp-post-image:hover 。

You can tweak the opacity value or transition delay time to get your desired effect. We hope this article helped you learn how to fade images on mouseover in WordPress. Let us know what you think by leaving your feedback and questions in the comments below. Don’t forget to follow us on Twitter.

您可以调整不透明度值或过渡延迟时间以获得所需的效果。 我们希望本文能帮助您学习如何在WordPress中将鼠标悬停时使图像褪色。 在下面的评论中留下您的反馈和问题，让我们知道您的想法。 不要忘记在Twitter上关注我们。

翻译自: https://www.wpbeginner.com/wp-themes/fade-images-mouseover-wordpress/

mouseover