JSFiddle - React, Tailwind, and code Playground

by iDVB

HTML

<div class="products">
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <!-- 12 Products -->
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <!-- 24 Products -->
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product" src="http://goo.gl/fSAEE" />
    <img class="product"...

CSS

body, html {
    background:black;
}

.products {
    width:522px;
}

.products .product {
    margin:0;
    padding:0;
    border:0;
    opacity:1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
}

.products:hover .product {
    opacity:0.5;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
}

.products .product:hover {
    opacity:1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
}