JSFiddle - React, Tailwind, and code Playground

by edwardmsmith

HTML

<H3>Rowl grrr, woof!</H3>
<img class="editable" src="http://www.poetryfoundation.org/uploads/authors/edgar-allan-poe/448x/edgar-allan-poe.jpg">

CSS

.editbutton{
    color: black;
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;  
}

JavaScript

$('.editable').bind('mouseenter',function(e) {
    var pos = $(this).position();
    var width = $(this).outerWidth();
    ele = $('<p class="editbutton">X</p>');
    ele.appendTo('body').hide();
    ele.css({
        position: "absolute",
        top: pos.top + "px",
        left: (pos.left + width - 14) + "px"
    }).show();
});
$('.editable').bind('mouseleave',function(e) {
    $('.editbutton').remove();
});