Image opacity/transparent left to tight and viceversa

Question

Is it possible? Is there any way to add transparency to images in CSS/jQuery, like this picture, so I mean if I put on tag background image, I need it to be transparent from left to right and viceversa. *background is transparent

I want to create something similar to the image below:

// HTML
<div id="main"></div> 

//CSS
#main {
    background-image: url('IMAGE.png'), url('PAGINATION.png');

    background-position: left, right;

    background-repeat: no-repeat;
}

Does anybody know how to do this? Hope you can understand the question. Thank you in advance.

If it is 2 images, why not just create an image that does what you want instead of trying to combine 2? If you need to fade out, then you are probably better off using 2 divs and a linear gradient, eg http://stackoverflow.com/questions/22666063/how-to-fade-the-edge-of-a-div-with-just-css — Pete, Apr 04 '17 at 15:22

score 0 · Answer 1 · answered Apr 04 '17 at 15:13

The key of this code is on mix-blend-mode: multiply;

 <!DOCTYPE html>
        <head>
            <title>MezclarColores</title>
            <meta charset="UTF-8" />
        </head>
        <style type="text/css">
            .circle {
                mix-blend-mode: multiply;
                display: block;
                border-radius: 50%;
                height: 150px;
                width: 150px;
                margin: 0;
            }
            #left {
                position: absolute;
                top: 20px;
                background: #58FAF4;
            }
            #right {
                position: absolute;
                top: 20px;
                left: 100px;
                background: #D358F7;
            }
            #bottom {
                position: absolute;
                top: 80px;
                left: 50px;
                background: #ff3;
            }
        </style>
        <body>
            <div class="circle" id="left"></div>
            <div class="circle" id="right"></div>
            <div class="circle" id="bottom"></div>
        </body>
    </html>

Image opacity/transparent left to tight and viceversa

1 Answers1