Managing the intersection of div elements

Can someone help me make the inner part of the red circle white, overlapping with the blue circle and transparent for the rest to reveal the green color underneath?

If anyone has a solution, I would greatly appreciate it.

#bigCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: rgba(0,0,250,0.5);
}

.smallCircle {
    margin-top: -244px;
    margin-left: 1px;
    border: solid rgb(226, 85, 20);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color:rgba(255,255,255,0);
}
<div id="bigCircle">
        <div id="middleCircle">
            <div class="smallCircle" />
        </div>
</div >
cssoverlap

Answer №1

#bigCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: rgba(0, 0, 250, 0.5);
}

.smallCircle {
  margin-top: -242px;
  margin-left: 1px;
  border: solid rgb(226, 85, 20) 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  position: relative;
}

.smallCircle:after {
  display: block;
  content: '';
  border: solid rgb(226, 85, 20) 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  clip-path: circle(120px at 50% 130px);
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: -3px;
  left: -3px;
}
<div id="bigCircle">
  <div id="middleCircle">
    <div class="smallCircle">
    </div>
  </div>
</div>

Answer №2

Imagine using a radial-gradient for the background color, fixed in place to match the blue circle:

#bigCircle,
#middleCircle{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
  width: 240px;
  height: 240px;
  background-color: rgba(0, 0, 250, 0.5);
}

.smallCircle {
  margin-top: -244px;
  margin-left: 1px;
  border: solid rgb(226, 85, 20);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition:1s all;
  background:radial-gradient(circle 120px at 190px 190px,#fff 99%,transparent 100%) fixed;
}
#middleCircle:hover .smallCircle {
  margin-top: -100px;
}
body {
  margin:0;
}
<div id="bigCircle">
  <div id="middleCircle">
    <div class="smallCircle" ></div>
  </div>
</div>

Answer №3

If I understood correctly, this solution may be helpful.

Styling with CSS

#hugeCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: rgba(33, 180, 45, 0.9);
}

#mediumCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background-color: rgba(90, 90, 200, 0.7);
}

.tinyDot {
    margin-top: -264px;
    margin-left: 3px;
    border: solid rgb(216, 92, 25);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0);
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieve seamless transitions between animations when hovering with CSS3

I am facing an issue with an element that has a CSS3 animation. When the element is hovered over, the animation changes to another infinite one. While everything is functioning correctly, the transition between animations sometimes feels too abrupt and b ...

cssanimationcss-transitionscss-animations

Wordpress Debacle: Bootstrap Columns Clash

Currently, I am in the process of designing a unique theme. In my code, I have implemented a condition that generates an additional div with the class "row" after every three posts or columns are created. Everything seems to be working smoothly, except f ...

phphtmlcsswordpresstwitter-bootstrap

Elements refuse to show up in a single line

I've styled two div elements with the properties below: .elem1 { width: 47.5%; margin-right: 2.5%; display: inline-block; } .elem2 { width: 47.5%; margin-right: 2.5%; display: inline-block; } Note: When I decrease the margin ...

htmlcss

Are you experiencing issues with modal contents extending beyond the modal on smaller screens?

I recently installed a modal plugin called blockUI for my image uploading needs. Although I have styled and positioned everything accordingly, I am facing an issue: Whenever I resize the browser screen, switch to my iPhone, or use another screen, some con ...

javascriptjqueryhtmlcssposition

Change the background color according to the user's input text

I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly. This is what I have so far: <label for="color">Color: </label> ...

javascripthtmlcss

Highlighting DOM elements that have recently been modified in Angular

Is there a simple way to change the style of an element when a bound property value changes, without storing a dedicated property in the component? The elements I want to highlight are input form elements: <tr field label="Lieu dépôt"> ...

cssangulartypescriptcontrolvalueaccessor

Create a website that can expand in size without relying on percentage values

At the moment, I am in the process of building a responsive website. The issue I am currently facing is that the layout for the responsive design (which was created by someone else and not me) has a fixed width of 745px. Obviously, this width does not acco ...

htmlcssresponsive-designtablet

Tweaking react-lottie and SVG dimensions with CSS media queries: A step-by-step guide

I am currently working on a React project that involves displaying Lottie-react animations and SVG's. My main concern is making sure that these illustrations are responsive on my website. The components are stored in a .js file, which I import into m ...

cssreactjsreact-componentlottie

Implementing dual backgrounds in CSS

I am trying to achieve a gradient background for li elements along with different image backgrounds for each individual li. Is there a way to accomplish this? List of items: <div id="right_navigation_container"> <ul> <li id ...

htmlcss

Is there a way to show textboxes stacked on top of each other without causing them to

Here is the HTML snippet I am working with: <div> <p><label>Faculty <input type="text" class = "f"></label></p> <p><label >Department<input type="text" class = "f"></label></p> ...

htmlcss

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

javascriptjqueryhtmlcss

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...

jquerycssjquery-uidatepickerjquery-ui-datepicker

disable full page scrolling on iOS devices

Can you achieve elastic scrolling for a single absolutely positioned div in Mobile Safari without causing the entire page to move up and down? Check out this basic example that illustrates the problem: <!doctype html> <html> <head> ...

javascripthtmlioscssmobile-safari

Stylishly Select with Bootstrap 4

Currently, I am utilizing Angular 2 with bootstrap 4 and have implemented the following select element: <div class="form-group"> <label class="col-md-4 control-label" for="OptionExample">Choose an option:</label> <div class="c ...

htmlcssangularselectbootstrap-4

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Edit I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being a ...

javascriptcssreactjsmaterial-ui

Scrolling without limits - cylindrical webpage (CSS/JS)

Is it possible to create a page that infinitely scrolls from top to top without going straight back to the top, but instead showing the bottom content below after reaching it? Imagine being able to scroll up and see the bottom above the top like a 3D cylin ...

javascripthtmlcssscrollinfinite

HTML5 header video with a subtle color palette

Is there a way to insert a muted video in the header that spans the full width but only has a height of 300px? The issue I am encountering is that when I decrease the height of the video, the width automatically decreases as well. However, what I want is ...

csshtmlbootstrap-4

Turn off the scrollbar without losing the ability to scroll

Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...

javascriptjqueryhtmlcss

Combining Content, Attr, and Url in a single statement

I've been utilizing the content attribute for quite some time now, but today I decided to explore something different. Instead of relying on JS to show an image tooltip, I was curious if it could be done dynamically using CSS. So I attempted the foll ...

cssurlattrcss-content

Center an element over two other elements using CSS

I have three elements: checkout-left, checkout-right, and product-2 <div class="order-form"> <div class="checkout-left"> <div class="video another-video"> ...

htmlcss