Styjun

• I have a main position: relative.



• Nested (input check box) position: absolute.




• When the checkbox is checked the inside div color will scale to 500px. The problem is the color will spill out its main .




• Here is the screen shot of the checkbox border spilling out of the main square . https://pasteboard.co/I7uA6am.jpg




• What I am trying to do is When we click the circle checkbox at the bottom right. The background color of that checkbox will fill the entire main which is a rectangle of 300px by 400px. In this case the checkbox border takes almost the entire screen as it is set to 500px.

I have tried
- Z-index
- Setting the width of the box-shadow transform to 100% width of the main
- overflow: hidden.
- position: absolute;

None of those solutions worked.

// HTML CODE //

<div class="card">
 <input type="checkbox" name="">
 <div class="toggle">+</div>
 <div class="imgBox"> </div>
 <div class="content"> </div>
 <div class="details"> 

 <h2>A quick check on CSS</h2>
 <p> Just doing a quick test on CSS</p>


 </div>
</div>

// CSS CODE //

card 
 position: relative;
 width: 300px;
 height: 400px;
 background: #262626;


input, 
.toggle 
 position: absolute;
 width: 50px;
 height: 50px;
 bottom: 20px;
 right: 20px;
 border: none;
 outline: none;
 z-index: 10;
 

 input 
 opacity: 0;
 

.toggle 
 pointer-events: none;
 border-radius: 50%;
 background: #fff;
 transition: 0.5s;
 text-align: center;
 font-size: 36px;
 line-height: 40px;
 box-shadow: 0 0 0 0px #9c27b0;
 overflow: hidden;
 

/* WHEN INPUT IS SET TO CHECK, TOGGLE APPEARS */

 input:checked ~ .toggle 

 box-shadow: 0 0 0 500px #9c27b0;

 transform: rotate(500);
 

As i understand you would need overflow:hidden on the .card. please let me know if this is what you were looking for

.card 
 position: relative;
 width: 300px;
 height: 400px;
 background: #262626;
 overflow: hidden;


input,
.toggle 
 position: absolute;
 width: 50px;
 height: 50px;
 bottom: 20px;
 right: 20px;
 border: none;
 outline: none;
 z-index: 10;


input 
 opacity: 0;


.toggle 
 pointer-events: none;
 border-radius: 50%;
 background: #fff;
 transition: 0.5s;
 text-align: center;
 font-size: 36px;
 line-height: 40px;
 box-shadow: 0 0 0 0px #9c27b0;
 overflow: hidden;


input:checked~.toggle 
 box-shadow: 0 0 0 300px #9c27b0;
 transform: rotate(500);

<div class="card">
 <input type="checkbox" name="">
 <div class="toggle">+</div>
 <div class="imgBox"> </div>
 <div class="content"> </div>
 <div class="details">

 <h2>A quick check on CSS</h2>
 <p> Just doing a quick test on CSS</p>


 </div>
</div>

is this how you want it?

card 
 position: relative;
 width: 300px;
 height: 400px;
 background: #262626;


input,
.toggle 
 position: absolute;
 width: 50px;
 height: 50px;
 bottom: 20px;
 right: 20px;
 border: none;
 outline: none;
 z-index: 10;


input 
 opacity: 0;


.toggle 
 pointer-events: none;
 border-radius: 50%;
 background: #fff;
 transition: 0.5s;
 text-align: center;
 font-size: 36px;
 line-height: 40px;
 box-shadow: 0 0 0 0px #9c27b0;
 overflow: hidden;


input:checked~.toggle 
 box-shadow: 0 0 0 300px #9c27b0;
 transform: rotate(500deg);
 background-color: #9c27b0;

<div class="card">
 <input type="checkbox" name="">
 <div class="toggle">+</div>
 <div class="imgBox"> </div>
 <div class="content"> </div>
 <div class="details">

 <h2>A quick check on CSS</h2>
 <p> Just doing a quick test on CSS</p>


 </div>
</div>