-
Hi,
I’ve searched everywhere, but I can’t find a solution.
I want to create a container with a text block in it, that fades in somehow, after loading the page.
I tried the effects with transition, but I cannot achieve this.How can I build this?
-
Hi there,
Unfortunately that effect isn’t available natively in GP/GB, so you’ll need to use custom CSS to achieve it.
Alternatively, you can use a third-party block plugin that provides this functionality.
-
Hi,
Clear.
Thank you. -
No problem 🙂
-
Hi,
I played around with effects on this, as I guess that should be possible.
My guess would be:Place the image in a container.
I can place a Text block in that same container with negative top-padding.
Default visibility: hidden (through effects).Now, i want to display it on hovering the image.
That should be possible, or am i wrong?
Isn’t this what effects are used for? -
Best practice is to do the following:
Set the image container POSITION to
Relative.
Also, set the image’s layout to
Block.
Insert text above image and set POSITION to
Absolute. Use Inset values and Transform effect to center accordingly. For example, to have the text at the bottom of the image, pushed up by 20px and horizontally centered, you would set Left INSET to50%, Bottom INSET to20pxwith a TRANSFORM effect of Translate type with a Translate X value of-50%.
Then, select the container and create a custom selector named
.gb-text. This will target the text inside the container.
Create a TRANSITION effect inside this selector and set OPACITY to
0%.
Select the main container again, create a new selector and name it
&:hover .gb-text.
Finally, set this selector’s OPACITY to
100%.Now, when you hover over the image (which is inside the container), the text will fade in. It will fade out when you hover outside the container.
-
Thanks George,
That works.
I will play around with it to create a design that i want.Thank you so much.
-
No problem!
- You must be logged in to reply to this topic.