Hi
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?
First of all, let me congratulate you, it’s a very nice website !
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”.
I used the scrolling effects because I found no other way
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)
I try popups (open automatically? but: open automaticaly - fixed in window - see screnshot also, please
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.
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!
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
