JSFiddle - React, Tailwind, and code Playground

by gryzzly

HTML

<h1>Hoverbox Image Gallery</h1> 
<ul class="hoverbox"> 
<li> 
<img src="http://host.sonspring.com/hoverbox/img/photo01.jpg" alt="description">
</li>
<li> 
<img src="http://host.sonspring.com/hoverbox/img/photo02.jpg" alt="description" />
</li>
<li> 
<img src="http://host.sonspring.com/hoverbox/img/photo03.jpg" alt="description" />
</li>
</ul>
<h1>Hoverbox Image Gallery in IE < 10</h1>
<ul class="hoverbox hoverboxIE"> 
<li> 
<img src="http://host.sonspring.com/hoverbox/img/photo01.jpg" alt="description">
</li>
<li> 
<img src="http://host.sonspring.com/hoverbox/img/photo02.jpg" alt="description" />
</li>
<li> 
<img src="http://host.sonspring.com/hoverbox/img/photo03.jpg" alt="description" />
</li>
</ul>

CSS

*
{
    border: 0;
    margin: 0;
    padding: 0;
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

a
{
    text-decoration: none;
}

body
{
    background: #fff;
    color: #777;
    margin: 0 auto;
    padding: 50px;
    position: relative;
    width: 620px;
}

h1
{
    background: inherit;
    border-bottom: 1px dashed #ccc;
    color: #933;
    font: 17px Georgia, serif;
    margin: 0 0 10px;
    padding: 0 0 5px;
    text-align: center;
    clear:both;
}

p
{
    clear: both;
    font: 10px Verdana, sans-serif;
    padding: 10px 0;
    text-align: center;
}

p a
{
    background: inherit;
    color: #777;
}

p a:hover
{
    background: inherit;
    color: #000;
}

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
    cursor: default;
    list-style: none;
}

.hoverbox a
{
    cursor: default;
}
.hoverbox li
{
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}
.hoverbox img {
    /* 
       in order to uze z-index you need 
       to have position:absolute or relative set
    */
    position:relative;
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border:1px solid;
    padding: 2px;
    width: 100px;
    height: 75px;
    /*
      CSS3 transition shorthand order:
      transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
      if you don't specify values for transition-property, default is "all"
      if you don't specify values for transition-timing-function, default is linear
    */
    -webkit-transition:.01s 1s;
    -moz-transition:.01s 1s;
    -o-transition:.01s 1s;
    transition:.01s 1s;
}
.hoverbox img:hover,
.hoverbox img.hover {
    z-index:1;
    width:200px;
    height:150px;
    margin:-37px...

JavaScript

// if IE < 10 
// You'd want to put this code in a separate script 
// and wrap a call to that script with conditional comment
// http://www.quirksmode.org/css/condcom.html
// like this: 
// <!--[if lt IE 6]>
// <script src="/path/to/the/code/below.js"></script>
// <![endif]-->
(function() {
    var timeout;

    $('.hoverboxIE img').bind('mouseenter', function() {
        if (timeout) clearTimeout(timeout);
        var img = $(this);
        timeout = setTimeout(function() {
            img.addClass("hover");
        }, 1000);
    }).bind('mouseleave', function() {
        if (timeout) clearTimeout(timeout);
        $(this).removeClass("hover");
    });
})();