JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="images">
    <div class="one"> <a rel="one" class="one" href="#">
            <img src="https://www.gerhard-richter.com/datadir/images_new/xxlarge/7089.jpg" />
        </a>

    </div>
    <!-- END | .one -->
    <div class="two"> <a rel="two" class="two" href="#">
            <img src="http://artblart.files.wordpress.com/2009/03/8489.jpg" />
        </a>

    </div>
    <!-- END | .two -->
</div>
<!-- END | .images -->
<div id="image_info">
    <div id="oneiconcontent">
        <p id="one">This one tells the first story</p>
    </div>
    <div id="twoiconcontent">
        <p id="two">While this one tells a different story.</p>
    </div>
</div>

CSS

/* Visual */
    /* Visual General Rule */
        .one, .two { height:auto; position:fixed; }
        .one img, .two img { filter: gray; -webkit-filter: grayscale(100%); -webkit-transition: all .6s ease; -webkit-backface-visibility: hidden; }
    /* Visual Location */
        .one { left:50px; top:100px; }
        .two { right:50px; top:250px; }
    /* Visual Dimension */
        .one img { width:200px; }
        .two img { width:400px; }
/* Info */
    /* Info Location */
        #image_info { display:none; left:10px; bottom:10px; position:fixed; }
    /* Visual General Rule */
        #oneiconcontent, #twoiconcontent { z-index:1000; }

JavaScript

$(function () {
    $(document).ready(function () {
        $(".one img").mouseenter(function () {
            $(".one img").css("-webkit-filter", "grayscale(10%)");
        });
        $(".one img").mouseleave(function () {
            $(".one img").css("-webkit-filter", "grayscale(10%)");
        });
    });
});


$(function () {
    $(document).ready(function () {
        $(".two img").mouseenter(function () {
            $(".two img").css("-webkit-filter", "grayscale(10%)");
        });
        $(".two img").mouseleave(function () {
            $(".two img").css("-webkit-filter", "grayscale(10%)");
        });
    });
});

<!-- //////////////////////////////////// -->

$(function () {
    $('.images a').mouseenter(function () {
        var toShow = '#' + $(this).attr('rel') + 'iconcontent';
        $('#image_info').show();
        $('#image_info div').hide();
        $(toShow).show();
    }).mouseleave(function () {
        $('#image_info').show();
    });
});