<ul class="cards">
<li class="card">
<button class="delete-btn">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="close button">
<span class="sr-only">Delete</span>
</button>
</li>
<li class="card">
<button class="delete-btn">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="close button">
<span class="sr-only">Delete</span>
</button>
</li>
<li class="card">
<button class="delete-btn">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="close button">
<span class="sr-only">Delete</span>
</button>
</li>
<li class="card">
<button class="delete-btn">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="close button">
<span class="sr-only">Delete</span>
</button>
</li>
</ul>
/* Applied transition */
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete;
}
.fade-out {
opacity: 0;
display: none;
}
/* Etc. */
@layer base {
body {
display: grid;
height: 90dvh;
place-items: center;
padding: 2rem;
}
.cards {
padding: 0;
display: flex;
justify-content: center;
width: 100%;
gap: 2rem;
max-width: 1000px;
}
.card {
width: 100%;
aspect-ratio: 2/3;
display: block;
background-color: tan;
position: relative;
border-radius: 1rem;
max-width: 220px;
}
.card:nth-child(2) {
background-color: khaki;
}
.card:nth-child(3) {
background-color: thistle;
}
.card:nth-child(4) {
background-color: wheat;
}
.delete-btn {
position: absolute;
bottom: -0.75rem;
right: -0.75rem;
width: 3rem;
height: 3rem;
padding: 0.5rem;
border: 4px solid;
border-radius: 100%;
background: steelblue;
color: white;
& img {
filter: invert();
}
}
.sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
}
document.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', () => {
btn.parentElement.classList.add('fade-out');
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.