CODEWITHSUNDEEP
javascripthtmlcss
kfir ezer
kfir ezer

Reputation: 179

How to make an element on top of a div in the same background color?

I'm trying to create a button for my website that has the same color as the background, even when its size changes. Basically, the button is on top of a div with white background, that is on top of the body which has gradient background-color. When I press on the button, its size (scale) changes, and I want it to seem like a cutout/window in the div, that will display the background color. What I tried to do is to make it gradient, but when it resizes - the gradient background of the button resizes as well. Also that solution is inelegant...

My cite's code:

function chg()
        {
            document.getElementById("main_div").style.width = "80%";
            document.getElementById("catch_div").style.right = "7%";
            document.getElementById("enter_div").style.left ="4%";
        }
html,body, #main_div{
   height: 100%;
   overflow: hidden
}
        body {
      background-color: #1862A1;
      background-image: linear-gradient(90deg, #1862A1, #8529B1);
      padding-bottom: 0;
      padding-top: 0;
      margin: 0;
    }
        #main_div{
    height: 100%;
    width: 100%;
     transition:all 0.3s ease-in-out;
     background-color: white;
        }
        .logo{
            width: 48.125vw;
            height: 22.3046875vw;
        }
        #catch_div{
            right: 40%;
            position: relative;
            transition:all 0.3s ease-in-out;
            margin-top: -3vw;
        }
        #enter{
            display: block;
          width: 6vw;
          height: 6vw;
          box-shadow: 0 0 0 1px #fff;
          text-align: center;
          line-height: 136px;
          border-radius: 100%;
          text-decoration: none;
          transition: all 250ms;
          outline: 0;
          background-color: transparent;
          border: 1px solid red;
}
        #enter:active{
            transform: scale(.90);
        }
        #enter:active #VButton {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
  transform: rotate(180deg);
 -webkit-transition-duration: 0.25s;
 -moz-transition-duration: 0.25s;
 -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
}
        #enter_div{
            left: 40%;
            position: relative;
            transition:all 0.3s ease-in-out;
            margin-top: 3vw;
        }
        .catchphrase{
             font-family: Niconne; 
            font-size: 3.5vw;
            font-weight: 400;
            color: #1761A0;
        }
        #cspan{
            background: -webkit-linear-gradient(to right, #1761A0 0%, #6B38B0 110%);
            background: -moz-linear-gradient(to right, #1761A0 0%, #6B38B0 110%);
            background: linear-gradient(to right, #1761A0 0%, #6B38B0 110%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background: linear-gradient(90deg, #1862A1, #8529B1) center fixed;     
            background-size: cover;     
            -webkit-text-fill-color: transparent;     
            -webkit-background-clip: text;
        }
        #VButton{
            width: 5.33vw;
            height: 5.33vw;
            margin-left: 0vw;
            margin-top:0.31vw;
            position:relative;
        }
<body onload="chg()">
        <form id="form1" runat="server">
        <center>
            <div style="min-height: 100vh;" id="main_div">
                <asp:Image runat="server" ImageUrl='~/BETTER_logo.png' ID="logo" CssClass="logo"></asp:Image>
                <div id="catch_div"><asp:Label ID="Label1" runat="server" Text="Label" CssClass="catchphrase">Feel <span id="cspan">the rythem</span></asp:Label></div>
                <div id="enter_div">
                <button type="button" id="enter">
                <center><img src="VButton.png" id="VButton"></center> <!-- problem -->
                </button>
                </div>
            </div>
        </center>
        </form>
    </body>

Is something like that even possible? Anyone has a direction that he can point me into? Tried looking online for something close, but with no luck, I would appreciate any help

EDIT: I would love for the cut out to be able to move, so that I'll be able to create animations in my site in the future with my JS code.

Upvotes: 0

Views: 996

Answers (2)

A Haworth
A Haworth

Reputation: 36567

You could create a 'hole' in the white div and place the button (with a transparent background) over it and scale them when clicked. That way the background image of the body will always show through and you don't have to worry about the button's background.

The way to create a hole is to give the white div a radial gradient, positioned where you want the button and with the first part transparent, and then white to the edge.

Here is a small example, the parameters for width etc are in CSS variables to make it easy to play around. Obviously put your own backgrounds for the body in and your own dimensions.

UPDATE the question was expanded to ask how to move the hole. The method here is to move the whitediv - we make it twice the dimensions of those that are actually seen on the screen so that as it moves the viewable part remains white.

Note any other elements that are on top of the white need to be taken out of whitediv and displayed over it so they don't move as the hole moves.

The demo simply expands/contracts the hole if the hole is clicked on and 'moves' the hole if the white part is clicked on [this last bit just for a demo]. Click the white part to see the hole 'fly in'.

const button = document.querySelector('.enter');
    const whitediv = document.querySelector('.whitediv');
    
    let n = 0; //just for a test to move the hole (whitediv) around

    button.addEventListener('click', function (ev) {
      ev.stopPropagation();
      whitediv.style.transform = whitediv.style.transform.includes('scale(1)') ? whitediv.style.transform.replace('scale(1)', 'scale(var(--s))') : whitediv.style.transform.replace('scale(var(--s))', 'scale(1)'); 
    });
    
    //just for a demo we move the hole around a little bit if the whitediv is clicked
    whitediv.addEventListener('click', function (ev) {
      n = (n+1)%3;
      whitediv.style.transform = 'translateX(-' + (10*n) +'%) translateY(-' + (10*n) +'%) scale(1)';
    });
* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
      width: 100vw;
      height: 100vh;
    }

    .container {
      
      --x: 30%; /* distance from the left of the white div to center of the hole */
      --y: 40%; /* distance from the top to the center of the hole */
      --d: 10vmin; /* the diameter of the hole to start with */
      --s: 2; /* the scaling factor - factor by which the hole will expand on clicking */
      
      --w: 40vw; /* width of the white div */
      --h: 40vh; /* height of the white div */
      --top: 10%; /* position of the white div */
      --left: 20%;
      
      position: relative;
      top: var(--top);
      left: var(--left);
      width: var(--w);
      height: var(--h);
      overflow: hidden;
      border: 4px white;
    }
    .whitediv {

      position: relative;
      width: 100%;
      width: 200%;
      height: 100%;
      height: 200%;
      background-image: radial-gradient(circle at var(--x) var(--y), transparent 0%, transparent calc(var(--d) / 2), white calc(var(--d) /2), white 100%);
      transition: all 2s;
      transform: scale(1) translateX(-50%) translateY(-50%);
      transform-origin: var(--x) var(--y);
      overflow: hidden;
    }

    .enter {
      background-color: transparent;
      height: var(--d);
      width: var(--d);
      position: relative;
      top: var(--y);
      left: var(--x);
      transform: translateX(-50%) translateY(-50%) scale(1);
      border-radius: 50%;
      border-style: none;
    }
<div class="container">
        <div class="whitediv">
          <div class="enter">
          </div>
        </div>
      </div>

Upvotes: 1

GucciBananaKing99
GucciBananaKing99

Reputation: 1506

Here are two ways to do what you wanted to do:

You could create a div with a button. You give the div a background colour. In this case it is blue. Then you give the button the background colour transparent to make the button transparent and the background colour is taken from the div. It is a bit difficult to explain. Therefore here is an example:

div {
  background: blue;
  width: 300px;
  height: 300px;
}

button {
  background: transparent;
  color: white; /* The button has a white colour to make it easier to see. /*
}
<h2>The background colour of the button was taken from the div</h1>

<div>
  <button>Hello World!</button>
</div>

Then there is a second possibility. You can address the div and the button at once. To do this, you have to separate the properties with a ,.

Here is an example:

div {
  height: 50px;
  width: 100px;
}

/* giving both a background color */

div, button {
  background: red;
}
<div>
  <button>Hello World</button>
</div>

<h2>Even if the button is not in the div, it has the same background colour.</h2>

<button>Second Button</button>
<br>
<br>
<button>Third Button</button>

Upvotes: 0

Related Questions