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;
  }
}
	

Related Post(s)

» Learn how to create responsive images with CSS

» Animated Social Media Icons Using Font Awesome and Materialize CSS

» How to create a Cutout Text Effect using CSS

» How do I wrap text in a pre tag?[SOLVED]

» Learn how to use CSS box shadow property - Source Code

collections_bookmark Category :: Css
date_range Published :: 7 months ago At: 04:54 PM
event_note Detailed Date :: Nov 19th, 2020
person Writer :: Code

YOU MAY LIKE THESE POSTS

share