JSFiddle - React, Tailwind, and code Playground

by iDVB

HTML

<div class="products">
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
    <img class="product" src="http://goo.gl/UHqVn" />
</div>

<iframe src="http://www.pc.ca/blacklabel/pcBlackLabel_product_categories_scroller.jsp" width="1024" height="800" scrolling="no"  seamless="seamless">
</iframe>

CSS

body, html {
    background:black;
}

.products {
    position:absolute;
    top:50px;
    left:20px;
    width:650px;
    border:red 1px solid;
    background: #161616;
    
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    filter:alpha(opacity=60);
}

.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);
}