时间戳

首页 > 解决方案 > 图像不会在其父容器之外缩放

javascript - 图像不会在其父容器之外缩放

问题描述

我已经复制了一个 netflix 风格的画廊轮播。问题是当我将图像悬停在它们的父元素之外时，它们不会缩放。

    <section id="section1">
      //I have actually much more images here that overflow horizontally the screen.
        <img src="https://occ-0-2007-1168.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABVypZKpbeCTdH_RiIUNhK-H_kNm_qvlA_43XPwJXpvme9IwH3o2gnHlWx9sPgX8A8N_m9s5OVW_zHiEHVacerrBlzuAfoAl_9ppM9nbpVIiDbgv2tmeAaBV55-H8.jpg?r=c94" alt="">
        <img src="https://occ-0-2007-1168.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABaArrKSNeknqjF6J-wz8_dI_ATA6BpmxR7FGuNwY5NpWy3X6AMupA-63bXbqjIaoztw9tsYDb9X7iCJt6R_xOxNVdKnpGfWwJ_E7WXFJUm32FWIMScuA_3bNf5sV.jpg?r=993" alt="">
    </section>

CSS：

#section1 {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  overflow-x: hidden;
}

.wrapper section img{
  width: 15.2vw;
  margin: auto;
  margin-left: 0.5rem;
  border-radius: 1rem;
}

img:hover {
  transform: scale(1.2);
  overflow: visible;
  position: relative;
  z-index: 50;
}

标签： javascripthtmlcss

解决方案

推荐阅读