1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

How to make half of image transparent

Discussion in 'Free Divi Community Forum' started by Syd Heller, Jul 3, 2025.

  1. Syd Heller

    Syd Heller New Member

    Hi all,

    Any ideas on how to create this opacity effect where the left half of the image fades out like this?

    Screenshot 2025-07-03 at 10.33.53 PM.png
     
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  2. Divi Booster

    Divi Booster Divi Expert

    Hey Syd,

    You can do it with a linear gradient as the "mask image". Here's an example that should work on the Divi image module - just add the CSS to your site and then add the 'faded-left' class to your image module.

    Code:
    Log In or Sign Up to view this code.
    This post has more details and covers other fade directions:

    https://divibooster.com/fade-a-divi-image-module-edge-into-the-background/

    If you're not using an image module, a similar technique should still work but you would need to change the CSS selector - if this is the case, feel free to share a link to the image you're trying to modify and I should be able to tell you what the correct CSS selector should be.

    Dan