JSFiddle - React, Tailwind, and code Playground

by ipr101

HTML

<div class='enlargemag'>
    <a href="#">
        <img src='http://cdn1.amara.co.uk/uploads/images/products/180/photo-frame-raffia.jpg'/>
    </a>
</div>

CSS

.enlargemag {
    width:180px;
    height:180px;
    padding:0px;
    margin:0px;
}

img {
    width:180px;
    height:180px;
    padding:0px;
    margin:0px;
}

JavaScript

$(".enlargemag").bind("mouseenter", function () {
    $("#enlargemag").remove();
    //var imgobj = $("img", this);
    var w = $(imgobj).width();
    var h = $(imgobj).height();
    var p = $(imgobj).position();
    $("<div id='enlargemag' style='border:none;cursor:pointer;position:absolute;top:" + p.top + "px;left:" + p.left + "px;width:" + w + "px;height:" + h + "px;background-color:#FF0000;'></div>").appendTo("body");
});
$("#enlargemag").live("mouseleave", function () {
    console.log("mouselave");
    $("#enlargemag").remove(); 
});