react-slick轮播图添加hover缩放效果仅能单方向缩放问题求助

你遇到的图片仅单方向缩放的问题主要由3个原因导致：

1. react-slick默认给.slick-list（轮播可视容器）设置了overflow: hidden，同时.slick-slide（单个轮播项容器）也默认存在溢出裁剪，图片放大后超出容器的部分被直接截断，视觉上就呈现为仅向单侧放大
2. 相邻轮播项的层级高于当前hover的图片，放大后的区域被旁边的元素遮挡
3. 未显式指定变形原点，部分浏览器渲染时会出现原点偏移的异常

修复方案 #

修改对应的CSS代码即可解决，调整后的代码如下：

.carousel {
  margin-bottom: 10rem;
  margin-left: 3.75rem;
  margin-right: 3.75rem;
  /* 给外层容器添加上下内边距，预留放大空间避免上下区域被裁剪 */
  padding: 2rem 0;

  /* 覆盖react-slick默认的溢出裁剪规则，如果你没用CSS Modules，把这两个规则写到全局CSS中即可 */
  :global(.slick-list) {
    overflow: visible;
  }
  :global(.slick-slide) {
    overflow: visible;
    /* 左右内边距移到轮播项上，避免影响图片本身的缩放盒模型 */
    padding: 0 2px;
  }

  .slider-container {
    div {   
      img {
        width: 100%;
        transition: transform .3s;
        border-radius: 5px;
        /* 显式指定变形原点为中心 */
        transform-origin: center center;
        position: relative;
        z-index: 1;

        &:hover {
          transform: scale(1.3);
          transition: transform .6s;
          /* hover时提升层级，避免放大区域被相邻轮播项遮挡 */
          z-index: 10;
        }
      }
    }
  }
}

不需要调整你现有的React代码，CSS修改完成后即可实现图片hover时向四周均匀放大的过渡效果。

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