HTML
<div class="gallery">
<article class="card">
<figure>
<img src="https://raw.githubusercontent.com/atherosai/ui/main/gallery-04/images/
forest.jpg" alt="Winter Forest">
<figcaption>
<h3>Winter Forest</h3>
</figcaption>
</figure>
</article>
<article class="card">
<figure>
<img src="https://raw.githubusercontent.com/atherosai/ui/main/gallery-04/
images/lavender-field.jpg" alt="Lavender Field">
<figcaption>
<h3>Lavender Field</h3>
</figcaption>
</figure>
</article>
<article class="card">
<figure>
<img src="https://raw.githubusercontent.com/atherosai/ui/main/gallery-04/
images/wooden-bridge.jpg" alt="Wooden Bridge">
<figcaption>
<h3>Wooden Bridge</h3>
</figcaption>
</figure>
</article>
<!-- Pictures from Freepik -->
</div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Basic&family=Poppins&display=swap");
:root {
--background: #3c343d;
--background-border: #6b626c;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Poppins;
height: 100vh;
padding: 32px;
display: grid;
place-items: center;
background-color: var(--background);
}
.gallery {
display: flex;
background-color: var(--background);
gap: 16px;
scale: 1.6;
}
.card {
position: relative;
left: 0px;
width: 140px;
height: 160px;
background-color: var(--background);
border-radius: 8px;
transition: 1000ms all;
transform-origin: center left;
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
outline: 1px solid var(--background);
overflow: hidden;
}
.card img {
height: 160px;
object-fit: cover;
border-radius: 4px;
}
.card:hover {
cursor: pointer;
transform: scale(1.15);
}
.card:hover figcaption {
font-size: 0.6rem;
position: absolute;
height: 80px;
width: 160px;
display: flex;
align-items: end;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0) 100%
);
color: white;
left: 0px;
bottom: 0px;
padding-left: 12px;
padding-bottom: 10px;
}
.card:hover ~ .card {
font-weight: bold;
cursor: pointer;
transform: translateX(22px);
}
