Different colour gradient on post images

  • Resolved viewh1

    (@viewh1)


    3 years, 1 month ago

    Hi,

    I’m looking to create a background colour gradient overlay on images in a post archive and post carousel. Additionally, I’m trying to get each post thumbnail to have a different colour gradient, or otherwise have five different colour-gradients and have them repeat after every five. Could someone please help with the CSS?

    To begin with I tried to create a single background colour-gradient to the post images with the following CSS, but with no luck;
    .post__body .post__thumbnail {
    background-image:
    linear-gradient: (45deg, #ae7ca2 50%, #6050f2 50%) !important;
    }

    Thanks in advance for any help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    For a background gradient to appear at all, the image itself would need to be partially transparent. Use your browser’s element inspector tool to try out partial transparency (opacity property) on an image. You may not like the result. It may or may not be a viable approach.

    For a true overlay effect, the image should be the background and the foreground element is a partially transparent gradient. Or at least two different elements that occupy the same space, the gradient literally on top of the image via z-index property.

    Aside from a semi-transparent image, any sort of gradient overlay effect needs appropriate HTML to appear correctly. AFAIK there’s no way with CSS alone.

    Thread Starter viewh1

    (@viewh1)

    Thank you, I’ll have a play around with what you suggest, and also thank you about the HTML, knew I must be missing something.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Different colour gradient on post images’ is closed to new replies.

Tags