JSFiddle - React, Tailwind, and code Playground

by iskeltan

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
    <body>
    <div class="karart"></div>
    <div id="ana">
        <div id="sol">sol</div>
        <div class="kutu">1</div>
        <div class="kutu">2</div>
        <div class="kutu">3</div>
        <div class="kutu">4</div>
    </div>
    </body>
</html>

CSS

body{ background:#E1E1E1;}
#ana{ border:1px solid black; width:800px; margin:auto; overflow:hidden;}
.kutu{ border:1px solid #D4D4D4; background:white; width:75%; float:left; height:100px; margin:5px; }
#sol{ border:1px solid #D4D4D4; background:#ccc; width:22%; float:right; height:450px; margin:5px; }
.kutu.aktif{ z-index:9999; position:relative;}
.karart{ background:black; z-index:9998; opacity:0.8; position:fixed; width:100%; height:100%; display:none;}

JavaScript

$(document).ready(function(){
    $(".kutu").hover(function(){
        $(this).addClass("aktif");
        $(".karart").fadeIn(500);                    
    },function(){
        $(this).removeClass("aktif");
        $(".karart").fadeOut(300);                    
    });
});