JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="scale_box" class="clearfix">
            
            <div class="scale">
                <img src="http://shop.rabenring.com/WebRoot/Store/Shops/Rabenring/45B4/6676/0FCD/70C3/F2BD/7F00/0001/CC5D/molton_deko_gelb.jpg" alt="" title="" width="38" height="110" class="scale_bar" />
                <a href="#" class="scale_icon_nature">
                    <div class="scale_value">99</div>
                    <div class="scale_icon"></div>
                </a>
            </div>
            
            <div class="scale">
                <img src="http://shop.rabenring.com/WebRoot/Store/Shops/Rabenring/45B4/6676/0FCD/70C3/F2BD/7F00/0001/CC5D/molton_deko_gelb.jpg" alt="" title="" width="38" height="110" class="scale_bar" />
                <a href="#" class="scale_icon_culture">
                    <div class="scale_value">69</div>
                    <div class="scale_icon"></div>
                </a>
            </div>
            
            <div class="scale">
                <img src="http://shop.rabenring.com/WebRoot/Store/Shops/Rabenring/45B4/6676/0FCD/70C3/F2BD/7F00/0001/CC5D/molton_deko_gelb.jpg" alt="" title="" width="38" height="110" class="scale_bar" />
                <a href="#" class="scale_icon_recreation">
                    <div class="scale_value">78</div>
                    <div class="scale_icon"></div>
                </a>
            </div>
            
            <div class="scale">
                <img src="http://shop.rabenring.com/WebRoot/Store/Shops/Rabenring/45B4/6676/0FCD/70C3/F2BD/7F00/0001/CC5D/molton_deko_gelb.jpg" alt="" title="" width="38" height="110" class="scale_bar" />
                <a href="#" class="scale_icon_treat">
                    <div class="scale_value">77</div>
                    <div class="scale_icon"></div>
                </a>
            </div>
            
            <div class="scale">
                <img...

CSS

/*--- scale % ---*/
    #scale_box {
        width: 100%;
        position: relative;
    }
    
    .scale {
        float: left;
        text-align: center;
        margin: 0 10px 0 0;
        width: 50px;
    }
    
    .scale img {
        margin: 0 0 1em;
    }
    
    #scale_box .scale_value {
        position: absolute;
        top: 50px;
        font-family: 'LufthansaLightRegular',Arial,Helvetica,sans-serif;
        font-size: 350%;
        color: #004da0;
    }
    
    .scale_icon {
        display: block;
        text-indent: -99999px;
        width: 50px;
        height: 40px;
    border: 1px solid lime;
        background: transparent url('../img/bg/bg_sprite_filter.png') no-repeat;
    }
    
    a.scale_icon_nature .scale_icon { background-position: -330px 0; }
    a.scale_icon_culture .scale_icon { background-position: -330px -40px; }
    a.scale_icon_recreation .scale_icon { background-position: -330px -80px; }
    a.scale_icon_treat .scale_icon { background-position: -330px -120px; }
    a.scale_icon_adventure .scale_icon { background-position: -330px -160px; }
    
    a.scale_icon_nature:hover .scale_icon { background-position: -380px 0; }
    a.scale_icon_culture:hover .scale_icon { background-position: -380px -40px; }
    a.scale_icon_recreation:hover .scale_icon { background-position: -380px -80px; }
    a.scale_icon_treat:hover .scale_icon { background-position: -380px -120px; }
    a.scale_icon_adventure:hover .scale_icon { background-position: -380px -160px; }

JavaScript

$(function() {
    $(".scale_value").hide();
    $(".scale_icon").hover(function () {
        // onmouseover prev element (.scale_value)    
         $(this)
             .prev()
             .show()
             .parent()
             .prev()
             .css("visibility", "hidden");
    },
    // onmouseout hide .scale_value
    function () {
         $(this)
             .prev()
             .hide()            
             .parent()
             .prev()
             .css("visibility", "visible");
    });
});