Add Red Dot on image using CSS?

Question

I'm wondering if it would be possible to create a CSS style that can enable a small red dot to show up overlaying an image to indicate that it was sold?

Can you overlay a transparent image on another image using CSS?

Answer 1

This code generates a red dot over the container div:

#cont {
        width: 200px;
        height: 200px;
        border: 1px solid #aaa; /*To show the boundaries of the element*/
    }
    #cont:before {
        position: absolute;
        content: '';
        background-color:#FF0000;
        border-radius:50%;
        opacity:0.5;
        width: 200px;
        height: 200px;
        pointer-events: none;
    }

<div id="cont">
<img src="" alt="image here" width="200" height="200">
</div>