JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<div class="row-fluid">
    <div class="span12" id="cover_pictures">
        <div class="images1">
            <div class="images2" id="img1"></div>
            <div class="images2" id="img2"></div>
            <div class="clearfix"></div>
        </div>  </div>
</div>
<div class="row-fluid">
    <div class="span12" id="cover_reflections">
        <div class="ref1">
            <div class="ref2" id="img1"></div>
            <div class="ref2" id="img2"></div>
            <div class="mask"></div>
        </div>  </div>
</div>
<div class="test">Transparency Test</div>

CSS

#cover_pictures .images1 {
    height:350px;
}
#cover_reflections .ref1  {
    height:150px;
}
.images1, .ref1 {
    width:100%;
}
#img1 {
    width: 200px;
    background-image: url(http://placekitten.com/200/300);
}
#img2 {
    width: 250px;
    background-image: url('http://placekitten.com/250/300');
}
.images2, .ref2 {
    /* top for reflections, doesnt matter for pictures*/
    background-repeat:no-repeat;
    float:left;
    height:100%;
    overflow: hidden;
    margin:0px 0%;
}
.images2 {    
    background-position:center top;
    background-size:auto 100%;
}
.ref2 {
    background-position:center bottom;
}
#cover_reflections .ref1 {
    -webkit-transform: scaleY(-1);
    opacity: 0.65;
      -webkit-filter: blur(1px);
} 
.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient( linear, center bottom, center top, color-stop(0.1, rgba(255, 255, 255, 0)), color-stop(0.95, rgba(255, 255, 255, 0.9)));
}
.test {
    position: absolute;
    top: 380px;
    background-color: red;
    z-index: -1;
}