JSFiddle - React, Tailwind, and code Playground

by NickJosevski

HTML

<html>
    <body>
        
        <div id="distance"></div> 
        <div id="container"> 
        
        <img src="http://www.menshealth.com/giftguide/images/odd-job-hat.jpg" id="toggle-image" />
        <!-- http://lab.smashup.it/flip/ -->
        </div> 
    </body>
</html>

CSS

* {
    margin:0;
    padding:0;
    }

html, body {
    height:100%;
    }

body
{
    background-color:black;
    text-align:center; /* horizontal centering for IE Win quirks */
    
        background-color:black;
        color:white;
        font:100.01%/1.4 sans-serif;
        text-align:center; /* horizontal centering for IE Win quirks */
}


#distance { 
    width:1px;
    height:50%;
    background-color:black;
    margin-bottom:-13.75em; /* half of container's height */
    float:left;
    }

#container {
    margin:0 auto;
    position:relative; /* puts container in front of distance */
    text-align:left;
    height:27.5em;
    width:45em;
    clear:left;
    background-color:black;
    border:1px solid black;
    }

#container div {
    font-size:80%;
    float:right;
    width:17em;
    margin-left:2em;
    }

JavaScript

var altImage = "http://www.findoutaboutpuppies.com/images/Labrador%20Retriever%20puppy400.jpg";
var regImage= "http://www.menshealth.com/giftguide/images/odd-job-hat.jpg";


(function() {
    $("#toggle-image")
        .mouseover(function() { 
            $(this).attr("src", altImage );
        })
        .mouseout(function() {
            $(this).attr("src", regImage);
        });
})(jQuery);