.selectable-image-container {
position: relative;
cursor: pointer;
display: inline-block;
}
.tick-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
opacity: 0; /* Hidden by default */
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease;
}
/* Show the tick overlay on click */
.selectable-image-container:active .tick-overlay,
.selectable-image-container.selected .tick-overlay {
opacity: 1;
}
.tick-icon {
color: white;
font-size: 3rem;
background: #28a745; /* Green background for the tick */
border-radius: 50%;
padding: 10px;
}
