Loading

Sliding call to action overlay

Mouse over button and translucent overlay slides off. Effect performed using JQuery UI.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Sliding call to action overlay</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="ctabox">
	<div class="bxslider1">

	  <div class="rollbox">
	  		<a href="" class="bwWrapper"><div class="ctaslide1">
	  			<img class="ctamask" src="http://andrewjtullio.com/codepen/ctamask.png" alt="">
				<img class="ctagal1overlay" src="http://andrewjtullio.com/codepen/cta1overlay.png" alt="" style="display: inline;">
				<img class="ctagal" src="http://andrewjtullio.com/codepen/cta1bg.png" alt="">
	  		</div></a>
	  </div>

	  <div class="rollbox">
	  		<a href="" class="bwWrapper"><div class="ctaslide2">
	  			<img class="ctamask" src="http://andrewjtullio.com/codepen/ctamask.png" alt="">
				<img class="ctagal2overlay" src="http://andrewjtullio.com/codepen/cta2overlay.png" alt="" style="display: inline;">
				<img class="ctagal" src="http://andrewjtullio.com/codepen/cta2bg.png" alt="">
	  		</div></a>
	  </div>

	  <div class="rollbox">
	  	<a href=""><div class="ctaslide3">
	  		<img class="ctamask" src="http://andrewjtullio.com/codepen/ctamask.png" alt="">
			<img class="ctagal3overlay" src="http://andrewjtullio.com/codepen/cta3overlay.png" alt="" style="display: inline;">
			<img class="ctagal" src="http://andrewjtullio.com/codepen/cta3bg.png" alt="">
		</div></a>
	</div>

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

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
body {
  background: #b3c8df;
}
div.ctabox {
  width: 1068px; 
  display: block;
  margin: 0 auto;
}
div.ctabox img {
  margin-right: 60px;
}
.ctamask { 
  position: absolute; 
  z-index: 20;
}
.ctaslide1 {
  position: relative;
}
img.ctagal1overlay { 
  position: absolute;
}
.ctaslide2 {
  position: relative;
}
img.ctagal2overlay { 
  position: absolute;
}
.ctaslide3 {
  position: relative;
}
img.ctagal3overlay { 
  position: absolute;
}

.rollbox {
  float: left; 
  margin-top: 25px;
}
/* Downloaded from https://ahoj.co.uk/ */
				$(document).ready(function(){
					  $(".ctaslide1").hover(function () {
					    $('img.ctagal1overlay').toggle('slide', 'right', "700");
					  });
					  $(".ctaslide2").hover(function () {
					    $('img.ctagal2overlay').toggle('slide', 'right', "700");
					  });
					  $(".ctaslide3").hover(function () {
					    $('img.ctagal3overlay').toggle('slide', 'right', "700");
					  });			  			  
				});

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