<div class="flex-gallery">
<div class="panel active" style="background-image: url('https://placehold.co/600x800/3b82f6/ffffff?text=Explore')">
<h3>Explore</h3>
</div>
<div class="panel" style="background-image: url('https://placehold.co/600x800/ec4899/ffffff?text=Create')">
<h3>Create</h3>
</div>
<div class="panel" style="background-image: url('https://placehold.co/600x800/10b981/ffffff?text=Design')">
<h3>Design</h3>
</div>
<div class="panel" style="background-image: url('https://placehold.co/600x800/f59e0b/ffffff?text=Build')">
<h3>Build</h3>
</div>
</div>
.flex-gallery {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: flex;
width: 100%;
height: 400px;
gap: 10px;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%;
border-radius: 20px;
color: #fff;
cursor: pointer;
flex: 1;
transition: flex 0.5s cubic-bezier(0.05, 0.6, 0.4, 0.9);
position: relative;
overflow: hidden;
}
.panel h3 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-size: 1.5rem;
opacity: 0;
transition: opacity 0.3s 0.2s;
background: rgba(0,0,0,0.5);
padding: 5px 15px;
border-radius: 8px;
}
.panel:hover {
flex: 5;
}
.panel:hover h3 {
opacity: 1;
}