JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="wrapper"><div id="container">
    <div class="row1">
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/1.jpg" data-name="Andrea    Catherine    Abeln" data-school="Berkner High School"></a><h1 class="name"></h1></div>
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/2.jpg"  data-name="Jacob    Scott    Abshire" data-school="Hargrave High School"></a></div>
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/3.jpg"  data-name="Matthew    David    Baldree" data-school="Silsbee High School"></a></div>
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/4.jpg"  data-name="Cobi    Lynne    Barker" data-school="North Lamar High School"></a></div>
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/5.jpg"  data-name="Jenna        Barnett" data-school="Marshall High School"></a></div>
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/6.jpg"  data-name="Grace    M    Beaudoin" data-school="Ingram Moore High School"></a></div>
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/7.jpg"  data-name="Austin    Humphries    Benesh" data-school="Dripping Springs High School"></a></div>
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/8.jpg"  data-name="Randi    Elizabeth    Berkovsky" data-school="Shiner High School"></a></div>
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/9.jpg"  data-name="Corbin    E    Boettger" data-school="Denison High School"></a></div>
        <div class="img"><a href="http://www.texasscholarathlete.com"><img src="images/10.jpg"  data-name="Robert    William    Bordovsky" data-school="Axtell High School"></a></div>
    </div>
    
    <div class="row2">
        <div class="img"><a...

CSS

/******************************************************************
******************************************************************
    I. GLOBALS
******************************************************************/

* { margin:0px; padding:0px; }
html { overflow-y: scroll; }
body { behavior: url("csshover3.htc"); font:13px/1.231 sans-serif; font-size:small; } /* hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }



#wrapper { margin:0px auto; width:1000px; }

#container { background:#1b346c; position:absolute; margin:40px auto 0px auto; width: 920px; border:25px #1b346c solid; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; height:736px; }
.nonIE #container { display:none; }

.img { position:relative; z-index:0px;  }
.img a img { position:absolute; border:1px #1b346c solid; background:#f1f1f1; width:90px; height:90px; }

.row1 { position:relative; top:0px; }
.row2 { position:relative; top:92px; }
.row3 { position:relative; top:184px; }
.row4 { position:relative; top:276px; }
.row5 { position:relative; top:368px; }
.row6 { position:relative; top:460px; }
.row7 { position:relative; top:552px; }
.row8 { position:relative; top:644px; }

JavaScript

//mcpDESIGNS



var $imageWidth     = 92,    // with borders
    $imageColumns    = 10;    // images across

$("#container > div .img").each(function(index) {
    var $left = (index % $imageColumns * $imageWidth);
    $(this).css("left", $left + "px");
});

$(".img a img").hover(function() {
    $(this).closest(".img").css("z-index", 1);
    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
    $("#name").css("color", "#242424").html($(this).attr("data-name"));
    $("#school").css("color", "#242424").html($(this).attr("data-school"));
    
}, function() {
    $(this).closest(".img").css("z-index", 0);
    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
});