WordPress新手求助：实现图片hover灰度切换及标题平滑显示效果

Hey Arvid，作为WordPress新手能专注折腾效果真的很棒！你想要的hover时图片变灰+显示标题的效果，其实不用找插件，纯CSS就能轻松实现，而且完全流畅自然，我给你一步步讲清楚：

一、纯CSS实现方案（最适合新手） #

这个方法不需要安装任何插件，只需要添加几行CSS代码，操作简单易维护。

1. 给图片添加自定义容器类 #

首先，在WordPress编辑器里处理你的图片：

• 如果用区块编辑器（Gutenberg）：选中你要设置效果的图片区块，在右侧「设置」面板的「高级」选项里，找到「额外CSS类」，输入 img-hover-container。
• 如果用经典编辑器：给图片外面套一个 <div> 标签，比如：

  <div class="img-hover-container">
    <img src="你的图片URL" alt="图片描述">
    <div class="img-hover-title">你的图片标题</div>
  </div>
  

2. 添加CSS样式代码 #

接下来，把下面的CSS代码添加到你的WordPress站点：

• 进入WordPress后台→「外观」→「自定义」→「额外CSS」
• 粘贴以下代码：

/* 图片hover容器样式 */
.img-hover-container {
  position: relative;
  overflow: hidden;
  display: inline-block; /* 让容器适配图片大小 */
}

/* 默认图片样式 */
.img-hover-container img {
  transition: all 0.3s ease; /* 过渡动画，让效果流畅 */
  width: 100%;
  height: auto;
}

/* hover时图片变灰度 */
.img-hover-container:hover img {
  filter: grayscale(100%);
}

/* 标题默认样式（隐藏） */
.img-hover-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  padding: 10px 20px;
  background: rgba(0,0,0,0.6); /* 半透明背景让标题更清晰 */
  border-radius: 4px;
}

/* hover时显示标题 */
.img-hover-container:hover .img-hover-title {
  opacity: 1;
}

3. 调整样式适配你的站点 #

你可以根据自己的需求修改代码里的参数：

• 把 0.3s 改成其他数值，调整动画快慢（比如0.5s更慢）
• 修改 color、font-size 来调整标题的样式
• 调整 background 的 rgba 值，改变标题背景的透明度和颜色

二、如果需要动态调用文章/图片标题 #

如果你希望标题自动读取WordPress里的文章标题或图片标题（不用手动写），可以加一段简单的PHP代码配合CSS：

1. 找到你的主题的 functions.php 文件（建议用子主题修改，避免主题更新丢失）
2. 添加以下代码，给图片自动添加容器和标题：

function add_img_hover_title($content) {
  global $post;
  // 只在文章页面生效
  if (is_single()) {
    // 替换图片标签，添加容器和标题
    $content = preg_replace('/<img(.*?)src="(.*?)"(.*?)alt="(.*?)"/i', '<div class="img-hover-container"><img$1src="$2"$3alt="$4"><div class="img-hover-title">' . get_the_title() . '</div></div>', $content);
  }
  return $content;
}
add_filter('the_content', 'add_img_hover_title');

这段代码会自动给文章里的图片加上容器，并把文章标题作为hover时显示的内容，你也可以修改 get_the_title() 换成 get_post_meta($post->ID, '自定义字段', true) 来调用自定义标题。

最后，保存所有修改后，刷新前端页面就能看到效果啦！这个方案完全不需要插件，而且动画流畅，很适合新手上手。

内容的提问来源于stack exchange，提问作者Arvid Ottosson