Loading

Before and After Image

Before and After Image, Before After Image, Before & After Image

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Before and After Image</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Karla'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  	<div class="main">
    <h2> Before & After</h2>
	<div class="slideBA">
		<div class="img1"><img src="https://goo.gl/Ruichf"/></div>
		<div class="img2"><img src="https://goo.gl/3bZuwc"/></div>
	</div>
	</div>
<!--  More advanced-->
<div class="ID">
  <a target="_blank" href="https://goo.gl/7RUqsU"><i class='fa fa-codepen'></i></a>   
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
body{background: #e9ebee; font-family: 'Karla', sans-serif;}
.main{width:75%;margin:10px auto}
.slideBA{position:relative;cursor:col-resize; width: 100%;}
.slideBA div{position:absolute;top:0;left:0;overflow:hidden; width: 100%;}
.img2{border-right:solid 3px #e9ebee}


/* Respomsive */
/*1. SIZE FOR TABLET - 768px  === For 768px or LESS 748px  */
  
@media screen and (max-width: 768px) {

.main{width: 80%;}
.slideBA img{ width: auto;}

}

/* More: */
.ID a{background:#363636;color:#fff;position:fixed;right:25px;bottom:25px;width:42px;height:42px;padding:12px;border-radius:50%;box-sizing:border-box}.ID a:hover{box-shadow:0 10px 20px rgba(0,0,0,.2),0 6px 6px rgba(0,0,0,.25);transition:all .4s ease-in-out}
/* Downloaded from https://ahoj.co.uk/ */
$(".img2").css('width', '55%');
$(".slideBA").mousemove(
		function(e) {
		  var offset =  $(this).offset();
		  var iTopWidth = (e.pageX - offset.left);
		  $(this).find(".img2").width(iTopWidth);
		}
	);

This awesome code is write by WILDER TAYPE, you can se more from this user in the personal repository