[Resolved] Trying to get my head around Effects and Transitions

[Andrew]

I’m trying to have a box with a title where the title slides up and out of view on hover. If I do the effect/transition on the Headline it only works if I hover over the headline so I’m trying to tell it to target the container.

I’ve added a css class to the container (.nursery) and then in the effect/transition for the headline I’ve selected Custom Selector and entered the newly added css class for the container.

But then nothing happens? Am I pointing at the wrong thing?

[Fernando]

Hi Andrew,

It’s likely that you’ll need custom CSS for something like this.

Can you first create a similar structure on you page?

The Title and Content should be inside two different Container inserted into one Parent Container.

The Parent Container should have the Background image and the class nursery. Example structure: https://share.getcloudapp.com/bLu5EpOq

Let us know once it’s created.

[Andrew]

Thanks. I’ve rearranged so the headlines are in containers. I’ve done what I think needs to be done and targeted the css class of the parent container but nothing seems to happen – I take it this is where custom css is needed?

On a side note, what is Target – Custom Selector for if not this?

[David]

Hi there,

you should be able to create the base effect without CSS. CSS may be required for overflow control.
The thing is the Effect has to be applied to the Block that is to be hovered on.

1. Remove any classes you added so far.

2. Select the Headline Block ( ie. the target block ) that the actual CSS effect will be applied to.
And give it a class of: nursery

3. Select the Container Block ( ie. the Hovered block ) and Add Effect. And set:
Device to Desktop
State to Normal – we’ll change it in a minute.
Target to Custom Selector and in the field provided add your target element class with the preceeding . eg. .nursery

For reference:
https://docs.generateblocks.com/article/effects-overview/#adding-an-effect

Now adjust your effect eg. TranslateY – you should see the Headline Move.
If that works now change the State to Hover

Let me know

[Andrew]

Sorted – Thanks!

It took me SO LONG to get my head around custom selectors and what you were actually selecting and why. Must be tired 😂 Thanks again!

[David]

Glad to be of help!!

[Author]

Posts