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; } &lt;/style&gt;` </code></pre></div>