Javascript Icon Get 67% off the JavaScript Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs
Javascript

Create a simple jQuery hover call-to-action box

Here’s a quick and easy tutorial on how to create a small call to action box using two images, some CSS and jQuery. Article includes a free download for implementation on your own website.

Table of contents

How It Works

In the markup, we specify two images with the same absolute positioning. This allows ‘Image 1′ to overlap ‘Image 2′ so that it is hidden underneath. ‘Image 1′ is the original image, whereas ‘Image 2′ is a replica of the first image, but with a Gaussian Blur and button applied. Using jQuery, ‘Image 1′ is hidden upon hover over, which shows the second image. Hovering off again does the exact opposite.

HTML

Using an outer ‘div’ to wrap our images, inside we include our hyperlink (to wherever your call to action goes to) and our two overlapping images. Note the first image has a class called ‘static’ and the second, a class called ‘blur’. This is so we know which image is which. Static image is the one we see upon page load, and the blur, is our blurred image. These were both created using Photoshop.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

<div id="blur">
  <a href="#">
  <img src="img/hover-box-1.jpg" class="static">
  </a>
  <img src="img/hover-box-2.jpg" class="blur">
</div>

CSS

In the CSS we need to use relative positioning on the surrounding ‘div’ so that any elements inside that we position ‘absolute’ behave correctly.

/* Containing Element */
#blur {
  position:relative;
}

/* Static Image Shown Before Hover */
#blur img.static {
  position:absolute;
  left:0;
  top:0;
  z-index:1;
}

/* Image Shown Upon Hover */
#blur img.blur {
  position:absolute;
  left:0;
  top:0;
}

jQuery

Using a simple jQuery hover function we set the top image (which we’ve specified as “img.static”) to reduce it’s opacity to ’0′ (zero) upon hover. The “350″ is the timing delay in between (which you can change!), so it slowly fades instead of an instant zero opacity.

$(function(){
  $("img.static").hover(
  function() {
    $(this).stop().animate({"opacity": "0"}, 350);
  },
  function() {
    $(this).stop().animate({"opacity": "1"}, 350);
  });
});

Thank you for reading!

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.