Image Switcheroo

Create a hover effect for images (such as staff members) like this: Image Switcheroo demo

Usage ideas: they could change from black & white to color, or they could zoom/crop differently, add a border, tilt ... whatever you can change within a pair a of identically sized images.

1. Create images 300px tall and 300px wide. One for each image to be seen when the page loads - another for each to be seen on hover (mouseover).
2. Add an image module in a new section at the bottom of your page - choose the Grid display option. Load all the images you've created, then hide the section. Seems odd, right? Well, you're not going to use that section or module - but you will use the image links within!
3. On your switcheroo page, add as many text/gallery modules as you need for the number of images you’re adding to the page. Use the HTML icon (< >) and paste the code show below.
4. Modify each instance so that the image name is unique in each text/gallery module. There are three references within the code block - be sure the image name matches. The example uses Photo1, but you can use any name you wish as long as there are no spaces or any of these special characters: < > . , & ; : " ( ) { } ...basically, just use words with numbers attached when needed.
5. Now you need to replace 'URL for your *** image' within the code. Go to your image grid that you loaded, click on an image then right click on the blue image URL below the image and choose 'copy link address'. That's the label in Chrome - it may read differently in other browsers. 
6. Return to the first text/gallery module and paste in the link you just copied in the first 'URL for your initial image' - then go back to the image grid and get the URL for the second image, which you'll paste into 'URL for your hover image'. Repeat these steps for however many switcheroo images you're adding to the page.
7. Save the page, view it and test. If it's not working quite right and you've gone through the instructions a couple of times, contact Saffire Support via the orange Help button in Spark.

HERE’S THE CODE TO PASTE INTO EACH TEXT/GALLERY MODULE
Initial name & hover name must match for each photo pair.
The named pair must also be unique for each instance of the switcheroo.

<style>
    .photo1 {
        width: 300px;
        height: 300px;
        background: url("URL for your initial image") no-repeat;
        display: inline-block;
    }
    .photo1:hover {
        background: url("URL for your hover image") no-repeat;
    }
</style>
<div class="photo1">
</div>