HTML CODE AND JS CODE
<div class="container">
<div class="card" onclick="expandCard(this)" >
<img src="karan1.jpg" alt="">
</div>
<div class="card" onclick="expandCard(this)">
<img src="karan2.jpeg" alt="">
</div>
<div class="card" onclick="expandCard(this)" >
<img src="karan3.jpeg" alt="">
</div>
<div class="card" onclick="expandCard(this)" >
<img src="karan4.jpeg" alt="">
</div>
<div class="card" onclick="expandCard(this)">
<img src="karan5.jpeg" alt="">
</div>
</div>
<script>
function expandCard(card){
document.querySelectorAll('.card').forEach(c=>c.classList.remove('fullscreen'))
card.classList.toggle('fullscreen')
}
</script>
CSS CODE
` <br> .container {<br> position: relative;<br> width: 80%;<br> margin: auto;<br> height: 300px;<br> overflow: hidden;<br> }<br> .card {<br> position: absolute;<br> width: 200px;<br> height: 300px;<br> border-radius: 10px;<br> border: 3px solid #333;<br> box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);<br> transition: transform 0.3s ease, border-color 0.3s ease;<br> cursor: pointer;<br> }<br> .card img {<br> width: 100%;<br> height: 100%;<br> border-radius: 10px;<br> }<br> /* Positioning the cards to overlap */<br> .card:nth-child(1) { left: 0; z-index: 5; }<br> .card:nth-child(2) { left: 50px; z-index: 4; }<br> .card:nth-child(3) { left: 100px; z-index: 3; }<br> .card:nth-child(4) { left: 150px; z-index: 2; }<br> .card:nth-child(5) { left: 200px; z-index: 1; }</p> <div class="highlight"><pre class="highlight plaintext"><code> /* Hover Effect */ .card:hover { border-color: yellow; transform: scale(1.1); z-index: 10; /* Bring the card to the top when hovering */ } /* Expand effect on click */ .card.fullscreen { position: fixed; top: 50%; left: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%) scale(1); z-index: 100; border-color: yellow; cursor: default; } </style>` </code></pre></div>
Top comments (2)
Create a stunning photo album using HTML and CSS to showcase your favorite images beautifully. Utilize HTML for structure, sky replacement services including image tags and captions, while CSS enhances the visual appeal with layouts, colors, and responsive design. This combination allows you to craft a personalized gallery that is both functional and aesthetically pleasing, perfect for sharing memories or promoting your photography work online.
The concept looks good, but the CSS formatting seems broken due to
and
tags inside the code block. Removing those and wrapping the CSS properly in tags will fix the layout issue.</p>