How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.

Tutorial

HTML

copy



<div class="gallery-section">

<img src="lion.jpg" alt="lion" class="img1">
<img src="zebra.jpg" alt="zebra" class="img2">
<img src="owl.jpg" alt="owl" class="img3">

</div>

CSS

copy


body{
  max-width: 70%;
  margin:0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 50vh;
}

.gallery-section{
  position: relative;
}

.gallery-section img{
  width:40%;
  position: absolute;
  z-index:10;
  transition:all .5s;
  box-shadow: -3px 1px 5px rgba(0,0,0,.5);
}

.img1{
  left:5rem;
}

.img2{
  left:10rem;
  top:1rem;
}

.img3{
  left:15rem;
  top:2rem;
}

.gallery-section img:hover{
  z-index:20;
  transform: scale(1.2) rotate(-10deg);
}

.gallery-section:hover img:not(:hover){
  transform:scale(.9);
  opacity:0;
}

@media screen and (max-width:500px){
  .img1{
    left:5rem;
  }

  .img2{
    left:7rem;
  }

  .img3{
    left:10rem;
  }
}