WordPress网站制作悬停图片显示效果（2种方法）

继续分享wordpress外贸建站教程。分享去年底一个wordpress外贸建站项目中实现的悬停图片显示效果，即默认图片隐藏（透明），鼠标移到容器上才会显示，如上面的动图所示。

效果分析

从上面的动图可以看到，这个图片悬停效果是对整个容器生效的，而整个容器又分成了左右两个部分。我们只需要先把内容样式构建出来，然后再添加对应的CSS效果即可。在Elementor编辑器或古腾堡编辑器中都可以实现。接下来悦然wordpress建站会分别介绍两种实现方法。

Elementor编辑器实现

我们先用Elementor容器构建出上面的内容，简单步骤如下：

1. 先添加一个容器，里面再添加两个子容器，设置为左右排列，然后再按需设置两个容器的大小比例。
2. 添加一个背景图片，设置为覆盖模式，然后添加一个叠加色，比如一个半透明的黑色。
3. 左边的子容器添加内容，可以使用简单的图文框，或者是其它模块，按需即可。我的这个wordpress外贸建站项目中使用的是Flip Box模块。
4. 右边的容器添加图片模块，上传一张图片，比如某个产品或场景的图片。我这里是处理成圆形的，大家制作时并不需要完全照搬，按需即可。

接下来是关键步骤：

1.选中右边的图片，设置不透明度为0，这样图片默认就是完全隐藏状态了。

selector img {
    opacity: 0; /* 默认完全透明 */
    transition: opacity 1s ease; /* 添加平滑过渡效果 */
}
selector:hover img {
    opacity: 1; /* 鼠标悬停时变为不透明 */
}

2.选整个容器，打开【高级设置-Custom CSS】，把上面的CSS代码粘贴进去即可。（需要Elementor Pro）

最后更新页面即可生效。

古腾堡编辑器实现(GreenShift）

接下来再简单讲一下使用古腾堡编辑器如何实际类似的效果，这里需要用到古腾堡编辑器增强插件，这里以GreenShift为例来讲解（需要高级版）。

1. 在古腾堡编辑页面添加Row/Columns Advanced模块（安装GreenShift才会有）,然后选择两个分栏的预设。如有需要可以进一步调整两个分栏的宽度比例。
2. 左边分栏添加内容模块，可以是文字、段落或其它内容框，按需即可。
3. 右边分栏添加一个Image Advanced模块（安装GreenShift才会有），然后上传一张图片。

接下来又到了关键步骤：

1.选中右边的图片，然后打开【Advanced-Css变换和过渡】，设置不透明度为0。

{CURRENT} img {
    opacity: 0; /* 默认完全透明 */
    transition: opacity 1s ease; /* 添加平滑过渡效果 */
}
{CURRENT}:hover img {
    opacity: 1; /* 鼠标悬停时变为不透明 */
}

2.选中整个Row/Columns Advanced模块，打开【Advanced-Responsive and Custom CSS】，然后把上面的CSS代码粘贴进去。

最后发布页面即可看到效果，如上所示。

总结

不管是Elementor编辑器还是古腾堡编辑器，熟悉之后大家就会发现，不管制作哪种效果，只要把页面合理的进行拆解，操作步骤都是类似的，大家选择自己习惯的编辑器即可。如需了解更多，大家可以抽空看看悦然wordpress建站之前发布的页面结构分析拆解教程。