JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<div class="body">
    <div class="container">
        <div class="image">
            <img src="http://i1.cdnds.net/13/24/618x347/the-division.jpg">
        </div>
    </div>
</div>

SCSS

.body {
    //width: 70%;
    height: 400px;
    margin: 0 auto;
}
.container {
    display: block;
    margin: 0 auto;
    width: 100%;
    min-height: 400px;
    background: red;
}
.image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
		
		img {
        position: absolute;
        left: 0;
        top: 0;
        min-width: 100%;
        height: 100%;
    }
}
    
.flip-left,
.flip-right {
    position: absolute;
    top: 8px;
    width: 15%;
    height: 400px;
    overflow: hidden;
    z-index: -1;
		
		img {
			position: absolute;
      top: 0;
      min-width: 100%;
      min-height: 100%;
      transform: scaleX(-1);
			-ms-filter: "FlipH";
      		filter: FlipH;
		}
}
.flip-left {
    left: 0;
		
		img {
			right: 0;
		}
}
.flip-right {
    right: 0;  
		
		img {
			left: 0;
		}
}

JavaScript

$('.image').clone().removeClass('image').addClass('flip-right').appendTo('.body');
$('.image').clone().removeClass('image').addClass('flip-left').appendTo('.body');