JSFiddle - React, Tailwind, and code Playground

by alokdhari

HTML

<div class="myDiv">
    <img class="baseImage" src="http://dummyimage.com/300x300/000/fff" />
    <img class="hoverImage" data-link="www.xyz.com" src="http://dummyimage.com/40x40/F12/000" style="display:none" />
<div>

CSS

.myDiv{
    width: 300px;
    height: 300px;
}
.hoverImage{
    position:absolute;
    left: 34%;
    top: 3%;    
}

JavaScript

var $baseImage = $('.baseImage');
var $hoverImage = $('.hoverImage');
$baseImage.hover(
    function () {
        $hoverImage.show();
    },
    function(){
        $hoverImage.hide();
    });

$hoverImage.hover(function(){ $(this).show();});

$hoverImage.on('click', function(){
    alert($(this).data('link'));
});