I have a gallery of old black & white photo’s, of my family. With the aid of AI, I have restored many of them, and made them into modern colour versions. Instead of having the two pictures showing, side-by-side, I wanted people to be able to view the original, then when they hover over the image with their mouse, it would dissolve into the colour version, then when the mouse moves away, it would show the original black and white version. I’ve hunted through all the options of the gallery, and can’t find a way of doing this. Any suggestions, anybody?
There is no direct way to do that in sparkle, but you could instead use the before and after image option. This allows both images to be uploaded into a single placeholder. When the image is viewed on the page, users will see a slider that can be dragged across the image to display the variants.
Hi Stephie, thanks for that information. That sounds like it would be useful to me (as a compromise), any chance you could explain how that is done? I’ve searched through all the bits of the Sitely image placements, and I can’t find anything that would allow me to add multiple images to the same placeholder, and add a slider. I tried using the image gallery, but no slider, or fader. Any help would be much appreciated.
It’s really quite simple. Add a normal image object to the page and size/position it as required. add your first image as normal, then select the option “Before/After” comparison. This will open up options for your second image. The options look like this:
The order of images may be little confusing. In your case, the before image (the one displayed on the left of the image placeholder) is most likely to be the monochrome image, and the one displayed on the right side of the placeholder will most likely be your enhanced version. If that is the case, your first image will be the one displayed on the right of the placeholder, and your second image will display on the left. This is what the final result looks like in your web page:
Users will now be able to drag the slider to see the before/after effect. There are other options in the style panel that will allow you to style the slider bar and it’s icon.
One small tip, ensure that both images are the same dimensions in order to create a clean before/after transition.
2 Likes
WOW!! You are brilliant. Thank you SO much for showing me that, I do not know how I never noticed that, but it was there all the time (although, I wouldn’t even have known what it meant anyway) 
That’s WAY better then the method I found, which didn’t allow the user to go back and look at the B&W version again, as it only had a one time animation. Now they can scroll back and forward to their heart’s content.
Cheers 
1 Like
Great trick, I can see lots of places where I can used this feature in m’y sites. 
While the before/after might be the best option for what you want, it is in fact possible to do what you originally asked, with some caveats.
So mouse hovering actions has traditionally been an option of buttons. So instead of an image you add a button and make it as large as the image you want. Then set the image as button background. Further down in the setting you can edit the hover and clicked states, and when you have an image, the hover states let you set an alternate image, with a few transition options.
Now individual buttons are not in a gallery, and this is the main limitation. If that’s acceptable then it can work.
If you wanted the effect to apply to zoomed images, it can’t be done. But if you want them in a grid, that’s possible by using a plain grid instead of an image/video grid.
Also Sitely 7 adds hover options for many elements, including images, as demonstrated in one of the recent blog posts about the upcoming features. It doesn’t let you replace the image on hover, but one of the available options is to desaturate the image, so you effectively get a B&W image, though not exactly your original one.
1 Like
Hi Duncan, yes, I see what you mean, especially the bit about caveats
I can see that it could have uses, but the one that Stephie showed me, works best for me.
The button one, only has a maximum fade in, of 1s, which is still a bit fast, for my liking, whereas the hover over method, (within the before/after), gives the user the option of viewing the transition, at whatever speed they choose. I didn’t see any fader settings, and I couldn’t get any of the mouse hover options, to show anything different. The before/after, automatically sizes the second picture to align with the first one (as long as both images line up together as originals - which is one annoying feature of the Gemini generative fill, which often squishes the ‘restored’ image, and has to be readjusted manually, to match the background original (I’m still trying to get an answer from someone about that)).
Anyway, thanks for all the suggestions, it’s always fun trying out the different effects.
Hi, you can do exactly what you want to do by using the following process.
1 Create a button as large as you want the B/W image to appear and delete the text in the button
2 Make the Background of the button your B/W image
3 Create a popup exactly the same size as the button and lay it directly over the button
4 Add your colour image to the popup
5 Under the animation section of the popup at the bottom of the panel, select ‘fade’ and ‘in place’
6 In the Layers panel on the left, select the button and then select ‘on hover’ in the panel on the right
7 Select the popup
Go to preview and hover over the button
Hope that’s what you’re looking for.
2 Likes
A nice option, but bear in mind that touch screens don’t recognise a hover function, so users will have to tap to open the popup. They will then have to have a close option to dismiss the popup.
1 Like
Exactly, and I wondered about your method, for the same reason. I thought that it wouldn’t work on an ipad, because the hover isn’t available on their screens. But, your method works great on ipad screens. You still have to slide your finger over the picture, but then a simple swipe the other direction, reverses the process, so the viewer can see various transitions of the image, and view the comparisons, to their hearts’ content.
1 Like
I did a somewhat similar effect for my family website using a photo as the base, then adding a popup on top of that photo for names (initially I used the same photo on the popup as a guide for placing the names, then reduced the opacity of the popup image to 0% so I still retained the image even though I did not need it). I then added a blank button on top to activate the popup. Kind of convoluted, but it does the job. I prefer people clicking on the image rather than hovering because it works better that way on a device like an iPad. Here is a link to preview (scroll down to family photo, other examples further down the page as well): Updegrove Family
2 Likes
Although it’s not what I needed for my immediate situation, that looks like a very useful thing for some other stuff I need doing. Thanks for sharing that info, I’ll see if I’m smart enough to follow all your instructions, and make it work the way you have done on your family site, well done.