JSFiddle - React, Tailwind, and code Playground

by amsardesai

HTML

<!DOCTYPE html>
<html>
     <head>
          <title>rohanbhangui</title>

          <script type="text/javascript" src="jquery-1.7.2.js"></script>
          <script type="text/javascript" src="script.js"></script>

          <link rel="stylesheet" media="screen" type="text/css" href="chrome.css" />

     </head>
     <body>
          <div id="container">
               <div  id="main">
                   <div id="header">
                    <h1 class = "logo"></h1>
                    <h1 class = "logohover"></h1>
                   </div>
                   <ul>
                      <li id="about"><a href="#">About</a></li>
                      <li id="work"><a href="#">Work</a></li>
                      <li id="contact"><a href="#">Contact</a></li>
                   </ul>
               </div>
          </div>
     </body>
</html>

CSS

html, body {
    background: #ccc; 
}

#container {
    border: 3px solid #fff;
    width: 500px;
    margin: 0 auto;
}

#main {
    border: 3px solid #000;
    height: 312px;
    margin-top: 90px;
}

#header {
    
    width:320px;
    height:146px;
}

.logo {
    display:block;
    float:left;
    width:320px;
    height:146px;
    background: url("http://img1.classistatic.com/cps/po/110630/693r1/96003be_27.jpeg")  no-repeat 0 0;
    text-indent:-10000px;
    position: absolute;
    z-index: 1;
}

.logohover {
    display:block;
    float:left;
    width:320px;
    height:146px;
    background: url("http://cdn.pedigreedatabase.com/german_shepherd_dog/i/german_shepherd_dog.jpg")  no-repeat 0 0;
    text-indent:-10000px;
    position: absolute;
    z-index:0;
}



.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

JavaScript

$(document).ready(function(){

    $("h1.logo").mouseenter(function(){
        console.log("entered");
        console.log($(this));
        $(this).stop().animate({
            'opacity':0
        }, 300);
    }).mouseleave(function(){
        console.log("left");
        console.log($(this));
        $(this).stop().animate({
            'opacity':1
        }, 300);
    });
    
    
    
    
});