<!DOCTYPE html>
<html lang="en">
<head>
    <title>Flex gallery</title>
    <!-- linking font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="box-1 box">
            <h3>Hey</h3>
            <h1>Let's</h1>
            <h3>Dance</h3>        
        </div>
        <div class="box-2 box">
            <h3>Give</h3>
            <h1>Take</h1>
            <h3>Recieve</h3>
        </div>
        <div class="box-3 box">
            <h3>Experience</h3>
            <h1>It</h1>
            <h3>Today</h3>        
        </div>
        <div class="box-4 box">
            <h3>Give</h3>
            <h1>All</h1>
            <h3>You Can</h3>
        </div>
        <div class="box-5 box">
            <h3>Life</h3>
            <h1>In</h1>
            <h3>Motion</h3>
        </div>
    </div>
 
</body>
</html>
*{
    margin:0;
    padding:0;
}
/* flex on container.Used to align all 5 images */
.container{
    display:flex;
    height: 100vh;
    overflow: hidden;
    font-family: 'Amatic SC', cursive;
}
/* flex on box.This will be used to align h3,h1 */
.box{
    flex:1;
    height: 100vh;
    display:flex;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-items: center;
    gap:2em;
    transition: ease-in-out 0.8s;
    text-transform: uppercase;
 
}
/* all the boxes are given background images individually */
.box-1{
    background-image: url('https://petapixel.com/assets/uploads/2021/07/11-Tips-for-Great-Nature-Photos-That-Stand-Out-From-the-Crowd.jpg');
    background-position: center;
  background-repeat:no-repeat;
  background-size:cover;
}
.box-2{
    background-image: url('https://static.boredpanda.com/blog/wp-content/uploads/2021/01/Mesmerizing-Nature-Photographs-that-will-Take-Your-Breath-Away-600ec1aeb720a__880.jpg');
    background-position: center;
  background-repeat:no-repeat;
  background-size:cover;
}
.box-3{
    background-image: url('https://composeclick.com/wp-content/uploads/2018/05/nature-1-1024x637.jpg');
    background-position: center;
  background-repeat:no-repeat;
  background-size:cover;
}
.box-4{
    background-image: url('https://blog.slickpic.com/blog/wp-content/uploads/2017/03/Bee-has-landed.jpg');
    background-position: center;
  background-repeat:no-repeat;
  background-size:cover;
}
.box-5{
    background-image: url('https://i0.wp.com/digital-photography-school.com/wp-content/uploads/2018/10/bluebells,_oxfordshire.jpg?fit=1500%2C1000&ssl=1');
    background-position: center;
  background-repeat:no-repeat;
  background-size:cover;
}
.box h3{
 font-size: 3rem;
}
.box h1{
  font-size: 5rem;
  transform: scale(0);
}
/* flex on box>* will applying flex on h3,h1 and h3. This is done for transition property and for better positioning */
.box>*{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex:1;
   transition: cubic-bezier(0, 0.95, 0.49, 0.65) 0.8s;
   /* applies transition to both h1 and h3 */
   
}
/* moving upper h3 up */
.box>*:first-child{
    transform: translateY(-100%);
}
/* moving lower h3 down */
.box>*:last-child{
    transform: translateY(100%);
}
/* this class will be added to increase size of box clicked */
.focus{
    flex:5;
    transform: scale(1);
}
console.log('hello');
let boxes=document.getElementsByClassName('box');


for(box of boxes){
    box.addEventListener('click',focusImg);
   
}
// is used to change properties of style parent. Will add class focus to grow box size and will translate h3 and h1 
function focusImg(){
//   this is the box that triggered function

// this is used to remove all the added classes(after first click).It will check if flex has been added, if it has means it was click onto before and property 
// must be set to original values
  if(this.classList.contains("focus"))
  {this.classList.remove("focus");
  this.children[0].style.transform="translateY(-100%)"; //moves h3 100% above
  this.children[1].style.transform="scale(0)"; //makes h1 disappear
  this.children[2].style.transform="translateY(100%)"
  }
  else
  {this.classList.add("focus");
  this.children[0].style.transform="translateY(-10%)";
  //how much up do I have to go from my initial position(i.e. position with no translateY) since we are changing the css for the h3 with no translate whatsoever
  //lesser the value,less up will it go from initial position.
  this.children[1].style.transform="scale(2)";
  this.children[2].style.transform="translateY(10%)";
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.