Hover effect to hide the current svg and reveal another svg

I try to get a workaround to hide a certain svg on hover (mouse over) and reveal another svg. I thought a button (Schaltflaeche) could do this but no - it’s only about some colour or soft effects but no replace feature.
I also tried a box and an image but can’t find a workaround.
Are there any ideas?

To let you see my intentions:
Meisterbetrieb in der Denkmalpflege und Restaurator im Handwerk – that big yellow MTRBTR should be replaced by MiTaRBeiTeR in a way, that the yellow and red vowels are shown/supplemented on mouse over.

Thanks in advance and Kind Regards,


First of all, let me congratulate you, it’s a very nice website ! :blush:

This is easily achievable with text. Are you required to use SVG files? It can also be done with SVG files, but if you want to revert back to the original image (i.e. hide the red letters again) when the cursor moves away, it becomes more complicated.

In any case, pop-ups will need to be used, and it will be impossible to integrate “scrolling animations” as it currently is, only “single animations”.

Well …

  1. I used the scrolling effects because I found no other way
  2. I started with text, but the output, as I want it, to hide the vowels at the beginning and kind of make space for the vowels by hovering the mouse over it (or as I did, scroll up) let me try it with svg (could be png as well)
  3. I try popups (open automatically? but: open automaticaly - fixed in window - see screnshot also, please

I cannot see how to achieve this.

Thanks and Kind Regards,

Bildschirmfoto 2023-03-17 um 19.03.23

I’m sorry, I don’t speak english and automatic translation is not accurate, so I’m not sure I understood everything.

Is this what you want to achieve? http://test.webpulse.fr/mtrbtr.html

This was done without an image, only with text. And contrary to what I told you earlier, you will be able to add the scrolling animation.

Almost-replaced by M i T a RBE ei T e R. Of course not like this, just to show that I supplemented the vowels/vocals (i a ei e) between MTRBTR.

Kind Regards,

As you should know, hover behavior doesn’t exist on touch screen devices. So when you design a responsive website, you should carefully plan when and where to use it.

Simple links that open some URL will loose their hover effect on some touch screen devices. On iOS hover is triggered before the click event, so you will see the hover style for a brief moment before the page changes.

Those are minor things, they don’t affect the functionality of the site. The real problem is a hover that either hides or shows another element using [display] or [visibility] CSS properties.

Mr. F.

1 Like

As I am not sure if I understood your request, I made two buttons for you: http://test.webpulse.fr/mitarbeiter.html

If this is what you want, you can download the Sparkle project containing the two buttons here and see how it is done: http://test.webpulse.fr/download/mitarbeiter.sparkle

Good evening :slight_smile:

Wise words from Horst (@Mr_Fozzie)!

This is probably why Sparkle doesn’t have hover states with text and images, but I’m hoping to see them in Sparkle 5 with the option maybe to turn them of for the “touch devices”.

Have you considered the outcome if the User doesn’t roll their mouse over the heading?
What about on a mobile device?

Have you considered using Sparkle’s “Typewriter Widget”? The widget would work the vowels. This would be independent of the User needing to do anything but being captured by the animation.

And yes!.. You’ve done a great job with your website so far! :slight_smile: :clap:

I am aware of this, yes.
I would either drop the hover effect for mobiles or think of something else, but thanks,

That typewriter stuff could be cool here - I try it - great idea and thanks for watching it out.

Kind Regards to all of you and THX again,

That seems exactly like what I want to achieve, download where/which button? What did I miss?

Thanks in advance,

Indeed, the download doesn’t seem to work on the forum. You have to copy and paste the link in the browser. But I added a button to download it: https://test.webpulse.fr/mitarbeiter.html

Tell me where - I feel overburdened :joy:


The button is at the very top, you may need to refresh the page :smile:

Got it :joy: THX from Germany

1 Like