JSFiddle - React, Tailwind, and code Playground

by dwat001

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

  <img id="floating-image" src="" name="floating-image">

  <div id="map-canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
      <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
        <div style="position: absolute; left: 0px; top: 150px; z-index: 1; cursor: url(&quot;http://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;), default;">
          <div style="z-index: 106; position: absolute; left: 0px; top: 0px;">
            <div style="position: absolute; left: 218px; top: -115px; cursor: default; z-index: 186;">
              <div style="position: absolute; left: 0px; top: 0px; width: 334px; height: 196px; overflow: hidden; -moz-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171);"></div>
              <div style="width: 334px; height: 196px;">
            <div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 12px; z-index: 10000; cursor: pointer;"><img style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/mv/imgs8.png"></div>

                <!-- IMPORTANT BIT FOR FIND jQuery Bug BEGINS -->  
                <div style="cursor: default; position: absolute; left: 18px; top: 18px; z-index: 2; overflow: auto; width: 300px; height: 162px;">
                  <div style="overflow: auto;">
                    <div id="monitor-site-info">
                  <p>There are 40 monitoring sites over Motuihe Island. This is site 2. Please see the <a target="_blank" href="http://www.motuihe.org.nz/motuihe/content.aspx?pageId=41">monitoring page</a> for more...

CSS

#map-canvas {
    width: 800px; 
    height: 700px
}

#floating-image {
    height:10;
    width:10;
    position:absolute;
}


#monitor-site-info {
    width: 300px;
    font-family: Arial, Sans-Serif;
}

.photo {
    float:left;
    padding: 2px;
    margin: 2px;
    border: solid 1px grey;
}

img.thumbnail {
    width:75px;
    height:75px;
}

img.flickrpreload {
    width:10px;
    height:10px;
}

.photo time {
    display:block;
    font-size:0.7em;
}

JavaScript

/* Cut down to find bug in Jquery*/

function hideZoomImageNow() {
    $("#floating-image").css("z-index", 0).css("display", "none");
}

function initialize() {
    $("#floating-image").mouseleave(function(image) {
        $(image)
        //.stop()
        .animate({
            width: 75,
            height: 75,
        }, {
            duration: 100,
            compleate: hideZoomImageNow
        });
    });

    $('div.photo').hover(

        function() {
            var url = "http://farm7.static.flickr.com/6047/6414817033_95b9c6aebd.jpg";
            $("#floating-image")
                .stop()
                .attr('src', url)
                .offset($(this).offset())
                .height(75)
                .width(75)
                .css("z-index", 500)
                .css("display", "inline")
                .animate({
                        width: 500,
                        height: 325
                    }, 250);
    
        }, function() {}
        );

}

$(function() {
    initialize();
});