Блог

Я скопировал карусель галереи в стиле 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;
}