Hello, does anyone know how, or if it’s possible to make image rollover effects? ie, changing to another image on mouse hover?
Thanks,
Andy
1 Like
@AndyRebellious, No, not yet possible in Sparkle.
We can’t change from one image to another image on a hover state, but you can use a button over an image and bring about a number of hover state effects! 
It’s a feature I have asked for in the past. Not currently possible in Sparkle, but I hope it’s on Duncan’s list of things to add.
1 Like
You can do this with “Code integration”
- Click on toolbar button “Settings” and on “Miscellaneous” and activate “Code integration”.
- Add the element “Embedded Content” to the canvas, just a small rectangle (it’s invisable).
- Insert the CSS code below at the right side under tab “Style” and save it.
- Add two pictures on the canvas and move one picture exactly over another.
- Select the top picture and go at the right side under tab “Arrange” to “Code integration”.
- Enter the CSS id “picture”, like in this sample.
<style>
#picture{
opacity:0;
transition: all 0.5s ease;
transform: scale(0.8);
}
#picture:hover{
opacity:1;
transition: all 0.5s ease;
cursor: pointer;
transform: scale(1.0);
}
</style>
Here a small sample with this css code. sparkle.perfect-tools.de
Cheers,
Frank
7 Likes
@ Franky; Thanks for your sharing. It worked well with my Sparkle for one set of two images, but It didn’t work for two sets of two images on the same Sparkle page. I’m wondering whether there are tricks to do the same effect for two sets of two images on the same Sparkle page.
Thanks
Alex Park
Hi Alex,
Sure, you can add these CSS ID to further elements. The element on top gets the CSS add-on. Just take a look at my sample website again.
Hello Franky, I was very happy to see that you could do the rollovers as they are something I had on a website that I have now transferred to sparkle and had to abandon. I immediately tried to make an example of what you said - but I’m obviously doing something wrong as it’s not working. I stacked the 2 images, which are exactly the same size, on top of the element with the CSS code in the style tab and put the Css id picture on the top image but no joy on the preview, can you tell me what I have done wrong - or do I have to publish to see the rollovers?
Take a look at a page from my ‘pre-sparkle’ website (www.paulcritchley.com/paulcritchley/uk/pages/uk.htm) to see what I’d like to re-create on my sparkle site.
Thanks,
Helen
Hi Helen,
You can place the element anywhere. It is invisible, the main thing is that you find it again. A small rectangle in a corner of the canvas is OK. Select the picture on top and go right side on tab “Arrange”. Enter the name of your CSS code in the field “Code Integration”. That’s it. Sorry, if I name some terms differently. I use the German user interface. Cheers, Frank
Thanks Franky, it is working very fine with 2 images. Just have to see if some preferences in Safari are booking the second image
Hi Franky, it seems I’m too stupid to make it work. I think I did exactly what you wrote/suggested, but in no browser the preview shows that it works.
Is it supposed to work in Preview, or do I have to upload it, or at least publish it?*
It looks great on your sample website, and I had roll over buttons/images on my former website and was slightly frustrated that I couldn’t use them in Sparkle.
Any help is highly welcomed!
Thanks
Edit:* published it to disk, but still no success …
@ chrisM
Do the followings:
- open Settings -> Miscellaneous -> Check Code integration
- stack two images up and make the top top image active by clicking it
- Select Arrange on the Inspector and write “picture” in Code Integration
- If you have two or more sets of two images, do the same things
- On Style, drag and place "Embed and paste the codes offered byFranky
- do the preview and you will see the rollover effects.
Hello Flealife & Frank,
I have tried again and this time it works - it seems the problem was privacy settings.
Thank you for your help,
Regards,
Helen
@flealife Thank you for trying to help. I started all over, did what YOU wrote, but still no go. I even tried the word picture with and without quotation marks (though I thought there shouldn’t be any). It still only shows the top picture without doing anything in Firefox and in Safari.
It sounds so easy, but it’s frustrating when it doesn’t work …
@helen How did you manage your privacy settings and solve the problem?
EDIT: I started all over AGAIN - and I have no idea, why now it worked. I copied Frankies code directly from the website, but other than that …
Very strange … but kind of happy now.
@chrisMF
I have done it again following the instructions and I’ve got the rollover effects exactly:
- Click Settings -> Miscellaneous -> Code integration “checked” Allow HTML…
- Drag and drop a pair of two images on the page and stack one image atop another.
- Drag and drop another pair of two images and stack one image atop another.
- Activate top images and click Arrange -> write “picture” in the id # blank of Code integration
- Copy the CSS codes by Frank. You should include …
- Click “Embed” and paste the codes in “Embedded content” on the inspector and click 'Save"
- Do the preview. Done!
You can’t miss it!
Thank you @flealife for your support. As I stated in my last Edit, I have no idea why, but after restarting everything for the third time it worked. Just great! There are so many opportunities to use it in a website, it should be part of Sparkle!
Thanks again - and also thanks a lot to @Franky for the code!
Thank you for sharing. Just what I was looking for. Works perfect!
Marte
Works like charm! thanks for sharing it!! 
Good job Franky. I tested several animations. “Rotate(360deg)” doesn’t work and I don’t understand why. But with the code below, it works:
Bon boulot Francky. J’ai testé plusieurs animations. “Rotate(360deg)” ne fonctionne pas et je ne comprends pas pourquoi. Mais avec le code ci-dessous, ça marche 