JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<div class="main">
    <div class="hidden">
        XXXXX
    </div>
</div>

    
    
    
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="script.js"></script>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
    margin: 0px;
    padding: 0px;
    background: #f7f7f7;
    height: 5000px;
    font-family: 'Open Sans', sans-serif;
}

.main {
    background-image: url("http://i.telegraph.co.uk/multimedia/archive/02705/newyork_2705424b.jpg");
    background-size: auto;
    width: 50%;
    height: 370px;
    margin: 10% auto;
    position: relative;
    box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.5);
}
.hidden {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100;
 
}

JavaScript

$(document).ready(function (){
    $(".hidden").hide();
    $('.main').mouseenter(function () {
        $(".hidden").show("fast");
    });
  });