WordPress下Elementor Pro图片画廊hover放大占邻图空间如何实现

结论 #

仅靠CSS只能实现简化版效果，要完全符合你的需求必须搭配JavaScript

纯CSS可实现的效果边界 #

• 如果你的需求可以简化为「hover时图片仅在同列内放大，占用同列上下相邻图片的空间，不跨列占用左右列的位置」，纯CSS完全可以实现
• 实现逻辑是用CSS Grid布局，配合:hover伪类动态修改当前元素的grid-row跨度，同时用兄弟选择器让同列其他元素缩小，代码可以直接加在Elementor编辑器的自定义CSS模块里，不需要改源码，对无编程基础的用户友好
• 局限：CSS的选择器规则只能选中当前元素的后续兄弟元素、子元素，无法选中父容器、前置兄弟元素或者其他列的元素，完全做不到你要求的「占用左右相邻2-3张图片空间」的跨列效果

必须用JavaScript的场景 #

如果需要实现跨列放大、自动调整左右相邻列的元素大小为放大图片让位的完整效果，必须用少量JavaScript做逻辑控制：

1. hover时动态计算当前图片的位置，给它设置对应的Grid行列跨度
2. 给所有需要让位的相邻图片（上下左右的2-3张）动态添加缩小类
3. 监听hover结束事件，把所有元素的样式恢复成默认状态

你用Elementor Pro的话不需要自己从零写代码，直接在Elementor的自定义JS面板粘贴现成的Gallery悬停展开代码片段，修改下行列数参数就能用，操作门槛很低。

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