<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="parent"> <img class="image" id="box" src="https://placeimg.com/640/480/nature" alt="" /> <div class="cover"></div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> <script> TweenMax.staggerFrom(".cover", 3, {y: 1000, ease:Power2.easeInOut}, 2); TweenMax.staggerFrom(".image", 1.8, {force3D: true,autoAlpha: 0,overflow: "hidden",x: "-480px",width: "0px",height: "480px", ease:Power2.easeInOut, scale: 1.35, delay: 1.7}, 0.9); </script>

.parent { position: relative; overflow: hidden; height: 480px; width: 640px; } .cover { transform-origin: left; height: 480px; background-color: #333; position: absolute; top: -640px; display: block; width: 640px; } .image { opacity: 1; }