<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="beforeandafter"> <div class="before"> <img class="img-responsive" src="https://www.playdnl.com/upload/2017/0720/598d283f170f8ee2bb90e4ecc7c47c5409c72fdd.jpeg"/> </div> <div class="after"> <img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="700px" /> </div> </div>

<style type="text/css"> div.beforeandafter{ /* main container */ background: white; border: 1px solid gray; display: block; width: 600px; /* width of largest image width */ height: 400px; /* height of largest image height */ overflow: hidden; position: relative; /* important */ } div.before, div.after{ /* before and after DIVs within main container */ width: 100%; height: 100%; top: 0; left: 0; position: absolute; overflow: hidden; transition: all 1s ease-in-out; /* CSS transition. */ z-index: 100; } div.after{ z-index: 1; /* z-index of after div should be smaller than before's */ } div.beforeandafter:hover div.before{ width: 0; opacity: 0; }