JSFiddle - React, Tailwind, and code Playground

by the_archer

HTML

<head>
    <title>Image Hover List</title>
</head>
<body>
    <div id="container">
        <div class="wrapper">
            <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTHyGeHS8yt01TNVinsg23taNXGCpxRlWkuR0wBo6qKupU62UkGEQ" alt="image"/>
            <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcR1uzdAn_YNP99CQBuSD91aybc2W1ZZzXPmT3LS3zwS49Grrr63PbhbriTG" alt="image2"/>
            <div class="wrapper">
                <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTHyGeHS8yt01TNVinsg23taNXGCpxRlWkuR0wBo6qKupU62UkGEQ" alt="image"/> 
                <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcR1uzdAn_YNP99CQBuSD91aybc2W1ZZzXPmT3LS3zwS49Grrr63PbhbriTG" alt="image2"/>   </div>
            <div class="wrapper">
                <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTHyGeHS8yt01TNVinsg23taNXGCpxRlWkuR0wBo6qKupU62UkGEQ" alt="image"/>  
                <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcR1uzdAn_YNP99CQBuSD91aybc2W1ZZzXPmT3LS3zwS49Grrr63PbhbriTG" alt="image2"/>  </div>
            <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTHyGeHS8yt01TNVinsg23taNXGCpxRlWkuR0wBo6qKupU62UkGEQ" alt="image"/>  
            <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcR1uzdAn_YNP99CQBuSD91aybc2W1ZZzXPmT3LS3zwS49Grrr63PbhbriTG" alt="image2"/>  </div>
    </div>
</body>

CSS

.hidy
{
    display:none;
}

JavaScript

$(function() {
    $('#container img').animate({
        "opacity": 0.5
    });

    $('#container img').hover(function() {
        $(this).stop().animate({
            "opacity": 1
        });

    }, function() {
        $(this).stop().animate({
            "opacity": 0.5
        });
    });

        $('.wrapper img[alt=image2]').toggle();

});