I want to implement a feature where the user can click on a card to "cancel it". I can handle the JS, but I'm looking for the best way to add a "red opaque overlay" on top of the card after it's clicked.
My goal is to create a CSS class that makes the overlay not just transparent at 40%, but also slightly "red". And ideally without adding another div that wraps the entire card.
.card-deactivated{
opacity:40%
}
.card{
max-width:300px;
min-width:200px;
height: 350;
display: flex;
flex-direction: column;
padding: 0px 0px 20px;
gap: 10px;
background: #FFFFFF;
/* Gray/4px */
box-shadow: 0px 4px 8px rgba(41, 41, 41, 0.08);
border-radius: 10px;
overflow:hidden;
}
.card-img{
order: 0;
display:block;
margin-bottom:2rem;
}
.card-title{
align-self:center;
margin-bottom:1rem;
}
.card-description{
align-self:center;
margin:0px 20px 1rem;
text-align:center;
}<div class='card'>
<img class='card-img' alt='Card Image' src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ... (content truncated)
</div>
Edit I have been able to achieve some results by using this CSS code, however, I believe there might be a better or more optimal way to do it.
.card{
max-width:300px;
min-width:200px;
height: 350;
display: flex;
flex-direction: column;
padding: 0px 0px 20px;
gap: 10px;
background: #FFFFFF;
/* Gray/4px */
box-shadow: 0px 4px 8px rgba(41, 41, 41, 0.08);
border-radius: 10px;
overflow:hidden;
position:relative;
}
.overlay-selected::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .3;
background-image: linear-gradient(90deg, #eaee44, #eaee44);
}