Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Apply effecto to another element (class or id) on hover

  • Hello!
    Happy and having fun relearning the 2.0 version. Looks powerful!
    But I’m trying to do the old trick I did with the effects where you can apply -say a filter- to another element calling its ID or class…and set it to ‘hover’ too if needed.

    Hope it makes sense and is not resolved elsewhere (tried hard to find it).

  • Hi there,

    Happy and having fun relearning the 2.0 version. Looks powerful!

    Very pleased to hear that 🙂

    But I’m trying to do the old trick I did with the effects where you can apply -say a filter- to another element calling its ID or class…and set it to ‘hover’ too if needed.

    Hum…not sure I understand; can I see what you’ve done? and can you describe what you want to achieve?

    Let me know!

  • Hello, thanks for your response.

    I knew it wasn’t easy to explain…
    Let me try again.

    target effect

    There is an option when you apply an effect to an element where you can choose a ‘state’ and then also a custom selector as a target (it can be either self, inner container, background image, and said custom selector).

    Having a second element with that class you can make the effect happen on it instead of on the element where the effect is activated.

    blur affects second element

    Hope it clarifies it.

  • I see. It’s easy to do in V2 as well.

    You can select the block, go to the style panel, and click the More button on the top of the right sidebar, click +NEW, you can then add your custom selector, in your case, it’s :hover .hitme, with the Compoind selector option toggled.

    Here’s a screenshot for your reference:
    https://app.screencast.com/8tUnEZsUHSlAn
    https://app.screencast.com/ZhDwyWls62GIV

    Then you can change its style for the selector .gb-text-xxxxxxx:hover .hitme.

    Hope it’s clear. 🙂

  • Oh thanks! had not think of that approach.

  • You are welcome   🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.