JSFiddle - React, Tailwind, and code Playground

by lukempeters

HTML

<div id="slideRail">
    <div id="up"></div>
    <div id="down"></div>
    <div id="slideRailInner">
        <div id="theRail">
            <div class="image red"></div>
            <div class="image green"></div>
            <div class="image blue"></div>
            <div class="image yellow"></div>
            <div class="image brown"></div>
            <div class="image orange"></div>
            <div class="image purple"></div>
            <div class="image grey"></div>
            <div class="image pink"></div>
        </div>
    </div>
</div>

CSS

body {
    background: #cdcdcd;
}

div#slideRail {
    position: relative;
    padding: 10px;
    width: 130px;
    height: 290px;
    overflow: hidden;
    background: #eeeeee;
}

div#slideRailInner {
    position: relative;
    width: 130px;
    height: 290px;
    overflow: hidden;
}

div#up {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    opacity: 0;
    background: #ffffff;
}

div#down {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    opacity: 0;
    background: #ffffff;
}

div#up:hover, div#down:hover {
    opacity: 0.2;
}

div#theRail {
    position: absolute;
    top: 0;
}

div.image {
    margin: 0 0 10px 0;
    width: 130px;
    height: 90px;
}

.green {
    background: green;
}

.blue {
    background: blue;
}

.red {
    background: red;
}

.yellow {
    background: yellow;
}

.brown {
    background: brown;
}

.orange {
    background: orange;
}

.purple {
    background: purple;
}

.grey {
    background: grey;
}

.pink {
    background: pink;
}

JavaScript

var pxCount = 0;

$('#up').hover(function() {
   
    var railPos = $('#theRail').position();
    var railPosTop = railPos.top;
    var railPosBottom = railPos.bottom;
    
    var movingRailUp;
    
    for(pxCount < 10; pxCount++;) {
        
        var pxCountPx = pxCount + 'px';
        
        $('#theRail').css('top', pxCountPx);
    
    }
    
}, function() {
 
    
    
});