Search code examples
cssflexboxcss-transitionscss-transforms

CSS Flexbox image scale inside child

I have the following html :

<html>
  <head>
    <title>asd</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
      <div class="slide slide4"></div>
    </div>
  </body>
</html>

and the following css :

* { box-sizing: border-box; }

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.slide {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide1 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide2 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Galaxy-Space-Full-HD-Wallpaper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide3 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Landscape-Full-HD-Wallpaper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide4 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2018/10/Free-Desktop-Background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide:hover {
  transform: scale(1.2);
  z-index:20;
}

The zoom inside the div flex seems like a minor glitch on transform scale and i also want to find a way to just zoom the background image inside the div and not the div (that will be scaled outside of the view-port).

I tried adding a parent wrapper but it scales the div and not the background image .

As you can see in this Codepen : https://codepen.io/pufosme/pen/MZWWpM

Thank you !

Solution

  • You can try like below. I wrapped the slides with a parent container and added overflow: hidden.

    * {
  box-sizing: border-box;
}

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.parent {
  flex: 1;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide1 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide2 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Galaxy-Space-Full-HD-Wallpaper.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide3 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Landscape-Full-HD-Wallpaper.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide4 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2018/10/Free-Desktop-Background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide:hover {
  transform: scale(1.2);
}
    <div class="wrapper">
  <div class="parent">
    <div class="slide slide1"></div>
  </div>
  <div class="parent">
    <div class="slide slide2"></div>
  </div>
  <div class="parent">
    <div class="slide slide3"></div>
  </div>
  <div class="parent">
    <div class="slide slide4"></div>
  </div>
</div>