轮播图hover时transform:scale(1.2)无法溢出父容器问题求助

问题核心：你设置的.viewport是overflow:hidden，而CSS规范明确，当元素的任意一个overflow方向设为hidden/scroll/auto，其他方向的visible会被强制转为auto，所以overflow-x:hidden & overflow-y:visible的写法无效。

以下是无需复杂定位或window对象的简便解决方案：

核心思路 #

将图片的定位包含块提升到未设置overflow:hidden的父元素（.carouseldiv），让图片hover放大时脱离.viewport的裁切上下文，同时保留.viewport对轮播横向内容的裁切作用。

修改后的代码 #

SCSS 文件 #

@mixin ArrowStyle {
  width: 2rem;
  height: 2rem;
  color: white;
}

@mixin btnStyle {
  width: 3rem;
  height: 100%;
  display: grid;
  place-items: center;
  background: rgba(57, 21, 21, 1);
  border-radius: 15px;
  cursor: pointer;
  justify-self: baseline;
  &:hover {
    background: #b92f2c;
  }
}

.carouseldiv {
  margin: 5rem auto;
  width: 80%;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr 10fr 1fr;
  position: relative; /* 新增：作为图片的定位包含块 */
}

.carouselbtnleft {
  @include btnStyle();
  justify-self: baseline;
}
.carouselbtnright {
  @include btnStyle();
  justify-self: end;
}
.leftbutton {
  @include ArrowStyle;
}

.rightbutton {
  @include ArrowStyle;
}
.viewport {
  overflow: hidden;
  width: 100%;
}

.carousel {
  width: 100%;
  height: 20rem;
  display: flex;
  gap: 2rem;
  transition: all 500ms ease-in-out;
}

/* 新增：图片占位容器，保持轮播布局稳定 */
.img-container {
  width: 15rem;
  height: 100%;
  position: relative;
}

.img {
  position: absolute; /* 脱离文档流，避免被viewport裁切 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中显示 */
  width: 15rem;
  height: auto;
  object-fit: contain;
  transition: all 500ms ease-in-out;
  cursor: pointer;
  z-index: 10; /* 确保放大时显示在轮播内容上方 */
  &:hover {
    transform: translate(-50%, -50%) scale(1.2); /* 结合居中与放大 */
  }
}

TSX 文件 #

import { RiArrowRightSLine, RiArrowLeftSLine } from "react-icons/ri";
import Image from "next/image";
import { useCustomCarousel } from "./useCustomCarouel";
import styles from "./styles.module.scss";

const CustomCarousel = () => {
  const { handlers, values } = useCustomCarousel();

  if (!values.twentymovies) {
    return <p>Loading...</p>;
  }
  return (
    <div className={styles.carouseldiv}>
      <div
        className={styles.carouselbtnleft}
        onClick={handlers.LeftArrowHandler}
      >
        <RiArrowLeftSLine className={styles.leftbutton} />
      </div>
      <div className={styles.viewport}>
        <div
          className={styles.carousel}
          ref={values.viewportRef}
          style={{ transform: `translateX(${values.translateX}px)` }}
        >
          {values.twentymovies!.map((movie, index) => {
            return (
              <div key={index} className={styles["img-container"]}> {/* 新增图片容器 */}
                <Image
                  width={240} /* 对应15rem的宽度，1rem=16px，15*16=240 */
                  height={320} /* 根据图片比例调整，或设为auto，Next.js Image需要明确宽高 */
                  className={styles.img}
                  src={movie.image[movie.image.length - 1][1]}
                  alt={movie.title}
                  objectFit="contain"
                />
              </div>
            );
          })}
        </div>
      </div>
      <div
        className={styles.carouselbtnright}
        onClick={handlers.RightArrowHandler}
      >
        <RiArrowRightSLine className={styles.rightbutton} />
      </div>
    </div>
  );
};
export default CustomCarousel;

关键说明 #

1. .carouseldiv设置position: relative，成为图片的定位包含块，图片的绝对定位基于此元素，不再受.viewport的overflow:hidden影响。
2. .img-container作为占位元素，保证轮播的flex布局不会因为图片脱离文档流而错乱。
3. 图片通过transform: translate(-50%, -50%)居中，hover时同时应用scale(1.2)，保持居中放大的效果。
4. z-index:10确保放大的图片显示在轮播其他内容的上方，避免被遮挡。

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