W3Schools示例是添加悬停效果的有效方法。问题是gallery块的HTML结构与示例不匹配，因此调整示例代码以使用gallery元素并不是那么简单。
您可能可以将figcaption用于.overlay，但它不能覆盖整个图像，因此您需要更改它的默认CSS，使其完全覆盖图像。
您可能可以将figure用于.container。
这里有一个解决方案，但不是直接的。也许最好的建议是学会使用浏览器的元素检查器工具以获得良好的效果。你可以摆弄不同的CSS规则，直到你得到想要的效果。将要永久更改的内容复制到自定义程序或样式书的“附加CSS”部分。
螺纹起动器
卡普鲁德维奇
（@kacperludwiczak）
你好，@bcworkz公司。谢谢您的回复！
按照你的建议，我尝试了不同的CSS规则，我正在接近预期的结果。
虽然我无法在Image Gallery Block中实现图像块的效果，但围绕它，我创建了一个由列块组成的网格，并在每个列中嵌入了图像块（带有Additional CSS类）。它似乎工作正常，但我想问一下，这个解决方案是否有潜在错误的风险？
我使用的代码：
.悬停-img{显示：嵌入式块；最大宽度：100%；最小宽度：自动；溢出：隐藏；位置：相对；文本对齐：居中；}.hover-img:：之前，.悬停-img:：之后{位置：绝对；顶部：0；底部：0；左：0；右：0；背景色：rgba（2552552550.4）；内容：“”；过渡：0.4s缓解；不透明度：0；z指数：1；}.悬停-img图形标题{位置：绝对；顶部：0；底部：0；左：0；右：0；对齐项目：居中；显示：flex；justify-content：中心；不透明度：0；z指数：2；线高：1.5rem；字体大小：1rem；font-family：无衬线；}.hover-img：悬停：：之前，.hover-img：悬停：：之后{不透明度：1；}.hover-img：悬停图形标题{不透明度：1；}
这个解决方案给我留下了一个无法克服的问题。
在进行任何更改之前，每个图像块都链接到一个子页面。
在向图像添加附加CSS类并将上述代码粘贴到附加CSS后，这些链接停止工作。我仍然可以添加图片字幕的链接，但它们受到文本框区域的限制。
举例说明：
如您所见，我的目标是在您将鼠标悬停在图像上时使链接可用，而不必指向图片标题。
我可以用Additional CSS为处于悬停状态的图像添加链接吗？
或者，我可以以某种方式增加文本周围的框，使其仍然充当链接吗？
祝你一切顺利，卡普
这个解决方案是否有潜在错误的风险？
任何涉及代码的内容都有潜在错误的风险🙂
如果可能的话，尝试使用不需要额外类属性的CSS。最大的风险是在创建新库时忽略了添加必要的类。如果您需要区分普通库和悬停效果库，最好只向整个容器添加自定义类，而不是单个图像。
我知道使用自定义类更容易将W3学校示例应用于您的站点。这对于让一切按您的意愿运行很有用，但一旦完成，我建议尝试修改CSS选择器，这样就不需要自定义类。
悬停时链接失败的原因是默认块HTML中的覆盖没有链接，只链接了图像本身，而不是覆盖。您需要向覆盖层添加另一个链接锚点，或者链接整个容器，而不仅仅是图像。不幸的是，使用CSS无法做到这一点。要修改块HTML，您需要修改块的源代码。通过React过滤器或基于默认值创建自定义块。
除非你想把它变成一个重要的学习项目，否则最好是找到一个现成的画廊插件。我假设你还不是一个熟练的React开发人员，自定义库块只是小菜一碟🙂
遗憾的是，我不知道有哪个插件能做到这一点。我希望它们存在，我只是不知道它们会是什么。
螺纹起动器
卡普鲁德维奇
（@kacperludwiczak）
我在插件方面的经验是，它们很少准确地交付所需的内容，而且当它们交付时，会附带很多不必要的额外功能。对于像我这样的纯粹主义者来说，这有点问题。😉
无论如何，我找到了一个现在应该有用的插件，但同时我将开始学习如何创建我自己的自定义块。
谢谢你的所有提示。
我肯定能理解你不愿意使用第三方插件，这也是我学会为自己编写代码的原因之一。即使你没有按照预期使用插件，你也可以修改它以满足你的需要，或者用它来指导你如何通过自己的编码来完成一些事情。
