JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<div class="leader">
    <div class="image"></div>
    <div class="ad closed">
        <img src="http://img.qz.com/2014/12/torture-protest.jpg?w=1600&h=600&crop=1" alt="" />
    </div>
</div>

SCSS

$animationLength: 1;
.leader{
    position: relative;
    padding-bottom: 40%;
}
.image, .ad{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.image {
    background-color: red;
}
.ad {
    cursor: pointer;
    overflow: hidden;
    &.open {
        width: 100%;
        height: 100%;
        img{
            -webkit-mask-position: 0% 100%;
            -webkit-animation: wipe 1s infinite;
        }
    }
    &.closed {
        width: 20%;
        height: 50%;
    }
    img{
        position: absolute;
        bottom: 0;
        right: 0;
        -webkit-mask-position: 100% 100%;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-image: -webkit-gradient(
            linear, 
            center top, 
            right bottom, 
            color-stop(0%,rgba(0,0,0,0)),
            color-stop(80%,rgba(0,0,0,0)),
            color-stop(80%,rgba(0,0,0,1)),
            color-stop(100%,rgba(0,0,0,1)));
    }
}

@-webkit-keyframes wipe {
	0% {
		-webkit-mask-position: 100% 100%;
	}
	100% {
		-webkit-mask-position: 0% 100%;
	}
}

JavaScript

$(document).ready(function(){
    var $img = $(".image"),
        $ad = $(".ad"),
        $adImg = $ad.find("img");
    
    $adImg.width($img.width());
    $adImg.height($img.height());
    
    $ad.on("click", function(e){
        e.preventDefault();
        $ad.toggleClass("open");
        $ad.toggleClass("closed");
    });
});