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

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

» How to style an hr element using CSS

» How to create a Cutout Text Effect using CSS

» Create A Cool Layout Using CSS

Category :: Css
Published :: 1 year ago At: 04:54 PM
Detailed Date :: Nov 19^th, 2020
Writer :: Code

RECENT POSTS

6 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.

7 months ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.

7 months ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.

7 months ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.

7 months ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.

9 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?

11 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).

1 year ago

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.

Subscribe

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

Tutorial

HTML

CSS

Related Post(s)