Ask your WordPress questions! Pay money and get answers fast!

Fade one image on top of the other using Waypoints WordPress

Hi,

I have a WP site set up that uses the Cool Kitten parallax framework (http://jalxob.com/cool-kitten/) which comes with Waypoints.
http://imakewebthings.com/jquery-waypoints/

What I'd like to do next is make an image within one of the slides fade up over another when the slide comes into view. I think this is possible with Waypoints.

So far, the page code for the slide looks like this:

<section id="slide2" class="slide" data-slide="2" data-stellar-background-ratio="0.5"> <article class="wrap clearfix"> <div class="fourcol first"> <h2 class="h1 page-title white"> <?php the_field('design_header'); ?> </h2> <h3 class="h2"> <?php the_field('design_subheader'); ?> </h3> <?php the_field('design_text'); ?> <div class="sixcol first"><a class="button" href="#">design your bike now</a> </div> <div class="sixcol last"><a class="button" href="#">view our pre-built designs</a> </div> </div> <div class="eightcol last"> <div id="homepage-builder"> <img src="<?php echo get_template_directory_uri(); ?>/images/buildafixie-builder-green.jpg" width="788" height="353" alt="Buildafixie tool" id="design-overlay"/> <img src="<?php echo get_template_directory_uri(); ?>/images/buildafixie-builder-white.jpg" width="788" height="353" alt="Buildafixie tool" id="design-underlay"/> </div> </div> </article> </section>

It is the #design-overlay that I wish to fade up over the #design-underlay.

LESS CSS for those images and div is this:

#homepage-builder { position:relative; img#design-overlay, img#design-underlay { position:absolute; top:0; left:0; } img#design-overlay { z-index:10; } img#design-underlay { z-index:5; } }

I've tried variations on the following for the jquery, but nothing works.

$('#slide2').waypoint(function() { $('#design-overlay').fadeIn(1500); }, { offset: '25%' });

$('#slide2').waypoint(function(direction) { $('img#design-overlay').fadeIn(1500); }, { offset: function() { return -$(this).height(); } });

Can anyone help please?