css Question posted in
Some basic documentation can be found here.

Css – How can I sync my overlay image with my main circle shape?

I’m trying to replicate the look of a solar eclipse. I have a startup screen that shows a <div> with a border-radius at 50% and a width/height of 20vw. This achieves the rounded look of course and with some box-shadow I pretty much accomplish a look.

But I’d like to enhance the aesthetic with an overlay with some kind of blend-mode (I’ve tinkered with color-dodge and hard-light so I’ll do both somehow)

But I’m running into a wall right now because I cannot fit my eclipse overlay to be perfect around my circle. And I worry that specifically going down to decimal points will just have my design break later because of the units I’m using to make it responsive but I don’t know how else I’d try to keep my current layout while syncing my overlay with my shape.

I feel like there must be a better way.

I’m new to stack overflow so I’m sorry if I formatted this poorly. I’ve attached the overlay image I’m using to this question as well as the image reference I’m trying to replicate

overlay image (incase earlier link doesn’t work):
https://imgur.com/a/jYMDkaR

.startup-screen {
    position: absolute; 
    z-index: 99;

    display: flex; 
    overflow: hidden;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    width: 100vw;
    height: 100vh;
    background: black;
}


.startup-screen__eclipse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 40%;
    padding: 5%;

    box-shadow: 17px 17px 18px rgba(255, 255, 255, 1),
                5px 5px 5px rgb(255, 213, 0),
                6px 6px 6px rgb(66, 230, 255),
                50px 50px 100px rgb(230, 207, 255);

    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}


.startup-screen__eclipse__overlay {
    position: absolute;
    width: fit-content;
    height: fit-content;
    border: 2px solid red;
    top: 13%;
    left: 33%;
    /* mix-blend-mode: color-dodge; */
}

.startup-screen__eclipse__overlay img {
    width: 35vw;
    height: 35vw;
    mix-blend-mode: hard-light;
}
<div class="startup-screen" id="startupScreen">
  <div class="startup-screen__eclipse">
      <div class="startup-screen__eclipse__overlay">
          <img src="https://i.sstatic.net/6OwwlZBM.png"> 
      </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    The background and the red box are the same

    I used the vertical and horizontal ratios in vw units to get them right.

    More precisely, it might be better to set the desired percentage with JS.

    You can adjust the rest yourself, right?

    .startup-screen {
  position: absolute;
  z-index: 99;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: black;
}

.startup-screen__eclipse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20vw;
  height: 20vw;
  padding: 5%;
  box-shadow: 17px 17px 18px rgba(255, 255, 255, 1), 5px 5px 5px rgb(255, 213, 0), 6px 6px 6px rgb(66, 230, 255), 50px 50px 100px rgb(230, 207, 255);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  position: relative;
}

.startup-screen__eclipse__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  /* mix-blend-mode: color-dodge; */
}

.startup-screen__eclipse__overlay img {
  width: 100%;
  height: 100%;
  mix-blend-mode: hard-light;
}
    <div class="startup-screen" id="startupScreen">
  <div class="startup-screen__eclipse">
    <div class="startup-screen__eclipse__overlay">
      <img src="https://i.sstatic.net/6OwwlZBM.png">
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    HTML structure is very important, and the way you have it right now makes it a little bit complicated to do what you’re wanting. I would structure my HTML more like in the following example.

    html,
body {
  margin: 0;
  padding: 0;
}

.startup-screen {
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100vw;
  min-height: 100vh;
  background: black;
}

.startup-screen__eclipse-wrapper {
  position: relative;
  border: 2px solid red;
  width: 40%;
  aspect-ratio: 1;
}

.startup-screen__eclipse-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: hard-light;
}

.startup-screen__eclipse-overlay {
  position: absolute;
  top: 47%;
  left: 47%;
  width: 52%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  box-shadow: 17px 17px 18px rgba(255, 255, 255, 1), 5px 5px 5px rgb(255, 213, 0), 6px 6px 6px rgb(66, 230, 255), 50px 50px 100px rgb(230, 207, 255);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
    <div class="startup-screen" id="startupScreen">
  <div class="startup-screen__eclipse-wrapper">
    <img src="https://i.sstatic.net/6OwwlZBM.png" class="startup-screen__eclipse-image">
    <div class="startup-screen__eclipse-overlay"></div>
  </div>
</div>

    I added a wrapper for both the image and the custom overlay, and then placed the image and overlay as sibling elements inside. That way I can size and position both precisely without worrying about it messing up child elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search