<!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.