JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.8.2.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; (function($) { 	$ (document).ready(function(){ 		//TODO: Code here 		$(&#39;.showhide&#39;).hover(function() { 			$(&quot;.main1&quot;).fadeIn(); 			$(&quot;.lo"></script>
<div id="container">

	
	<div class="main" id="left">
		    <div class="main1 hide" style="background-image:url(http://global.fncstatic.com/static/managed/img/Health/Women%20Working.jpg); width:500px;">
                <div class="bigRound"><p><a href="##">Les hva de syne<br>som Pevelop</a></p></div>
                <div class="smlRound"><p><a href="##">Vi fokuserer på <br>konfidensialitet</a></p></div>
            </div>
            <div id="dot1"><a href="#" class="showhide"><img src="http://png-3.findicons.com/files/icons/766/base_software/128/circle_green.png" width="53" height="52" alt=""></a></div>
	</div>
    </div>

CSS

#container
{
	background:#a0a0a0;
	background-size:cover;
	width:500px;
    overflow:hidden;
    position:relative;
	height:500px;
}

.main {
    position: absolute;
    width: 100%;
    display:inline-block;
    height:100%;
    z-index: 1;
    overflow:hidden;
}

.main1
{
	width:500px;
	height:500px;
    background-position: center center;
    background-size: cover;
	display:none;
	position:absolute;
}

JavaScript

(function($) {
	$ (document).ready(function(){
		//TODO: Code here
		$('#container').hover(function() {
			$(".main1").fadeIn();
			$(".logo").fadeOut();
			$(".logo-left").fadeIn();
		}, function(){
		});
		
		$('.hide').hover(function() {
		}, function(){
			$(this).fadeOut();
			$(".logo").fadeIn();
			$(".logo-left").fadeOut();
		});
	});
	
		
})(jQuery);