.svg fade effect, HTML, .CSS, JQUERY, what to use?

  • It’s that moment once again where I bang my head against the doorpost as I dont have a clue on how to pull this trick, therefor again as a last resort I come here hoping someone is willing to help me out.

    As I’ve explained this quite alot already and was misunderstood on a regular base I’ve decided to use the screenshot explaination with a bit of extra text written information.

    Let start with the concept:
    https://mctcp.craftrealms.org/wp-content/uploads/2016/08/Naamloos-1.png

    which I want to apply on this .svg file:
    https://mctcp.craftrealms.org/wp-content/uploads/2016/08/mainpage-1.svg

    Text written explaination:

    I’m searching for a way to add a onmouseover command to the .svg file which zooms out a path and blurs/darkens the rest of the screen. I’ve experimented alot with .css and can’t even remember all the other things I’ve done before as I tend to get blackouts when I do my utmost best to find solutions.

    So, to all replying thanks in advance!!!!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello, and nice to know it’s your last resort ??

    As for your question, I think the best option would be to use a JS library, even Jquery can rotate and shade transparent items, to an extent.

    The real problem would be to make that responsive, but a simple solution would be to use the display:none; filter on your image class in CSS if mobile or lower than a given set of resolutions.

    There are specific JS libraries to rotate and animate, and there are generally more reliable than pure HTML5. But you can also use HTML5 / CSS3, the combination now fully support things you’d want:

    – rotation
    – z-index (layers)
    – opacity

    all combined

    On a desktop point of view, the only issue is that Safari browser often shows bugs with that.

    Hope it helps,

    Thread Starter NLBlackEagle

    (@nlblackeagle)

    Well, this is a suprice! I’ve been used to not getting anwsers on the wordpress support pages directly, the main reason for a topic is to direct people on the IRC when they ask for a forum topic haha.

    Anyway, I’ve been fiddeling with jquery but I have no clue how to actually implement this as the documentation is like a exotic maze to me.

    Is there any change we could chat over IRC and/or use https://jsfiddle.net/#run

    I’m feel kinda bad for asking but it would mean a huge lot to me

    Also, with jquery wouldnt it be easier to completely rebuild the thing I want or could I continue using the .svg file?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘.svg fade effect, HTML, .CSS, JQUERY, what to use?’ is closed to new replies.