I'm trying to create a hover effect where an image appears and is clickable when hovering over an element, similar to what is seen on many websites. For example, I want to display a bin icon when hovering over an element by using the ::before pseudo-element, and I want this icon to be clickable.
https://i.stack.imgur.com/W5lDl.png
The bin icon is shown in the section div using:
.section:hover::before {
content: url("@/assets/icons/bin.svg");
display: block;
position: absolute;
top: -10px;
right: 25px;
background-color: white;
}
While I've read that the pseudo-element itself doesn't allow for clickability, I'm curious about how this effect can be achieved.