0

I'm looking for a method that permit me to make transparent a div. I've got a div with a svg (Cf image), and I want that svg to make the div transparent to show instead the rest of an image in another div. I tried with mask but it didn't succeed

The HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="index.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="parallax.min.js"></script>
    </head>
    <body>

        <div class="top">
            <!-- Path : M 200 300 Q 300 300 300 200 Q 300 50 400 50 Q 500 50 500 200 Q 500 300 600 300  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
                <path fill="#000000" fill-opacity="1" d="M 200 600 Q 300 600 300 500 Q 300 350 400 350 Q 500 350 500 500 Q 500 600 600 600 "></path>
            </svg>
        </div>

        <div class="parallax" data-parallax="scroll" data-image-src="./img/Compressed 2.jpg"></div>

    </body>
</html>

The CSS :

body{
 width: 100vw;
    height: 300vh;   
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    background-color: #f5f6fa;
}

.top{
    background: #0f0c29; 
    background: -webkit-linear-gradient(to top, #24243e, #302b63, #0f0c29);
    background: linear-gradient(to top, #24243e, #302b63, #0f0c29);
    background-color: red;
    width: 100vw;
    height: 50vh;
    top: 0;
    left: 0;
    position: relative;
    margin: 0;
}

.top svg{
    width: 50%;
    height: 50%;
    transform: translate(50%, 100%);
    background-color: transparent;
}

.parallax {
    min-height: 50vh;
    background: transparent;
}

(note : I've got http://pixelcog.github.io/parallax.js/ 's parallaxJS) Thanks in advance ;)

OnHenriGolera
  • 1

0 Answers0