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 (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Gradient over image block

  • I usually add a gradient over background images.

    On this example though I just want to add a gradient over the image in the image block.

    I’m creating an a global style with :after psuedo element an then setting a background type gradient.

    It’s not working, what am i doing wrong?

  • Hi there,

    the :before and :after pseudo selectors can’t be used on a <img> as its a self closing tag.
    So you would need to use a Container Block with the pseudo gradient and place the image block inside it.

    Let us know if you require more detail.

  • Thanks, so that all works ok using a container block.

    But if I try to create a global style for the gradient to apply to each container block I don’t get the option of a pseudo element? Is that correct?

  • My question is not really covered in that document. Do you have a video on it?

    Otherwise I will just add a class manually and write custom CSS for it.

  • This video probably provides better insight:

    Personally, in your case, I would write my own custom CSS as I would not be limited by using the UI controls to generate the global styles CSS.

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