JSFiddle - React, Tailwind, and code Playground

by daneden

HTML

<div class=one>
    Hey, here's an image! <img src="http://placedog.com/100/100"> Yikes! No replacement here!
</div>

<div class=two>
    Hey, here's another image! <figure><img src="http://placedog.com/100/100"></figure> Woohoo! It worked!
</div>

CSS

img, figure {
    display: inline-block;
    position: relative;
}

img:after, figure:after {
    content: url(http://placebear.com/100/100);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
/*  pointer-events: none; uncomment to get the context menu for the original image */
}

img:hover:after, figure:hover:after {
    display: block;
}

div {
    margin: 100px 12px; /* purely for this demo */
}