JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<div id='main'>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUp3eNgYONlzWO_FTZ9V9s9F71y42cZHc7v7M2SpEe_nanpG9FNA">
    <img src="http://www.alearned.com/wp-content/uploads/2013/07/cheerful-cat.jpg">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcyrSs1aF1nRtPLny3sh1UfVV0XASqm7Clj6upT6iNaMK65UPPCQ">
    <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSvJW69oDhBo6bluG5izYnudlMKI_smrI-xrUzZeYK1mqNJ1przGg">
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRRRiN9XWMc0K6ZlhtWVRTTWV6jEaufwSKXyaIYpvGsWZNCxazF">
</div>

CSS

#main{
    width:400px;
    padding:30px;
    margin:auto;
    background-color:black;
    text-align:center;
}
#main img {
    display:inline-block;
    max-width:200px;
    background-color:red;
    margin:20px;
}

JavaScript

$("#main img").each(function(){
    var $this = $(this),x=.2;
    $this.css({opacity:x});
    $this.hover(function(){$this.stop().animate({opacity: 1});},
                function(){$this.stop().animate({opacity: x});});
});