GB2.0 Effects Panel Target Background

Hi there,

With GB Pro, you can create any custom selectors.

Can you specify what hover effect you want to add to the background image and the inner container?

Background image does not have anything to be targeted, they are attached to the container itself.

In your case, you need to create a pseudo-element (:before or :after) to attach the background image.
Try following the steps below:

1. Select the Container Block, set its Position to Relative, remove the background image.

2. While the container is selected, click the More button at top right of the right sidebar, click + New button, select :before , and compound the selector.
This will set the selector to: .gb-element-xxxxxxxx:before.

3. For the new selector .gb-element-xxxxxxxx:before, set position to Absolute, and the Top, Right, Bottom and Left values to 0, content to "".

4. Now you can attach the background image to .gb-element-xxxxxxxx:before, add transition to it.

5. Create a new selector .gb-element-xxxxxxxx:hover:before, and set scale to 1.05 in the effect panel.

For the inner container that contains text content,

1. Set position to relative, z-index to 1.

2. Add a class to the inner container, eg. slide-container.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

3. Select the outer container, create 2 new selector: .gb-element-xxxxxxx .slide-container and .gb-element-xxxxxxx:hover .slide-container.

4. Add the translate effect to .gb-element-xxxxxxx:hover .slide-container, and add transition to .gb-element-xxxxxxx .slide-container

I know, the old way was not ideal, but we will be adding some shortcuts to the UI 🙂