Expanding Cards gallerie with html, css and Javascript
A Pen by Abdelkarim KHALLOUK on CodePen.
Expanding Cards gallerie with html, css and Javascript
A Pen by Abdelkarim KHALLOUK on CodePen.
<div class="container"> | |
<div class="panel panel-1"> | |
<h3>Explore the word</h3> | |
</div> | |
<div class="panel panel-2"> | |
<h3>Beautiful blue sky</h3> | |
</div> | |
<div class="panel panel-3 active"> | |
<h3>Mountain</h3> | |
</div> | |
<div class="panel panel-4"> | |
<h3>Sunrise</h3> | |
</div> | |
<div class="panel panel-5"> | |
<h3>Night sky stars falling</h3> | |
</div> | |
</div> |
const panels = document.querySelectorAll(".panel"); | |
panels.forEach((panel) => { | |
panel.addEventListener("click", () => { | |
removeActiveClasses(panels); | |
panel.classList.add("active"); | |
}); | |
}); | |
function removeActiveClasses(panels) { | |
panels.forEach((panel) => { | |
panel.classList.remove("active"); | |
}); | |
} |
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap"); | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
overflow: hidden; | |
margin: 0; | |
background-color: #05070f; | |
} | |
.panel-1 { | |
background-image: url("https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"); | |
} | |
.panel-2 { | |
background-image: url("https://images.unsplash.com/photo-1436891620584-47fd0e565afb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"); | |
} | |
.panel-3 { | |
background-image: url("https://images.unsplash.com/photo-1465080357990-d4bc259ec4a9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"); | |
} | |
.panel-4 { | |
background-image: url("https://images.unsplash.com/photo-1572003818138-19cf96ee15e7?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"); | |
} | |
.panel-5 { | |
background-image: url("https://images.unsplash.com/photo-1472552944129-b035e9ea3744?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"); | |
} | |
.container { | |
display: flex; | |
width: 90%; | |
} | |
.panel { | |
background-size: cover; | |
background-position: center; | |
background-repeat: no-repeat; | |
height: 80vh; | |
border-radius: 30px; | |
cursor: pointer; | |
flex: 0.5; | |
margin: 5px; | |
position: relative; | |
transition: flex 0.7s ease-in; | |
} | |
.panel h3 { | |
position: absolute; | |
top: 30px; | |
left: 20px; | |
color: rgb(247, 251, 255); | |
font-size: 30px; | |
margin: 0; | |
opacity: 0; | |
} | |
.panel.active { | |
flex: 5; | |
} | |
.panel.active h3 { | |
opacity: 1; | |
transition: opacity 0.3s ease-in 0.4s; | |
} | |
@media (max-width: 480px) { | |
.container { | |
width: 100vw; | |
} | |
.panel:nth-of-type(4), | |
.panel:nth-of-type(5) { | |
display: none; | |
} | |
} |