How to display an overlay image in modal window (Colorbox) upon hover

Question

I have a series of images set up to display in modal lightbox-type windows – specifically, using the Colorbox module.

• The goal is for each image to be paired with a companion graphic overlay which is displayed upon hover over the Colorbox display.
• Think of it as (1) the photo, and (2) the "circles and arrows" overlay (maybe .gif or .png with transparent whites).

Can anyone verify its feasibility and suggest a path to this result?

Answer 1

You would probably have to write some custom javascript / jquery in your theme's JS file and call the colorbox function on hover. For example:

$('.img-1').hover(function(){
  $('.img-2').colorbox();
});

That's only the starting point. Once it is working with just 2 images, the next step would be to dynamically pair all the images so the javascript knows which image to show on hover.