Issue with 2 absolute positioned elements not staying together on scale

Question

I have two absolute positioned elements. One is a dot and the other is a box with just corners - both are animated. I'd like the dot to always be in the center of the cornered box that shows on hover. But the issue I'm having is when I make the browser window small the cornered box is slightly to the left and when I make it large the cornered box is slightly to the right. Both elements have fixed widths and both are positioned with percents. What did I do wrong? Here is what I have:

.wrapper {
  position: relative;
  width: 100%;
  min-height: 500px;
  background: blue;
}

.pulse {
  position: absolute;
  top: 41.8%;
  left: 45.614%;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
  animation: pulse 2s infinite;
}

.pulse:hover {
  animation: none;
}

.pulse:hover+.corners {
  visibility: visible;
  transform: scale(2);
  transition: all .6s;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.corners {
  position: absolute;
  top: 43.65%;
  left: 46.35%;
  pointer-events: none;
  visibility: hidden;
}

.corners:before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: -10px;
  left: -10px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.corners:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: -10px;
  right: -10px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

.corners-inner:before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -10px;
  left: -10px;
  border-bottom: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.corners-inner:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

<div class="wrapper">
  <span class="pulse"></span>
  <div class="corners"><span class="corners-inner"></span></div>
</div>

nyn05 · Accepted Answer · 2018-10-12T19:45:29.150

.wrapper {
  position: relative;
  width: 100%;
  min-height: 500px;
  background: blue;
}

.pulse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
  animation: pulse 2s infinite;
}

.pulse:hover {
  animation: none;
}

.pulse:hover+.corners {
  visibility: visible;
  transform: scale(2);
  transition: all .6s;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.corners {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

.corners:before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: -10px;
  left: -10px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.corners:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: -10px;
  right: -10px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

.corners-inner:before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -10px;
  left: -10px;
  border-bottom: 1px solid #FFF;
  border-left: 1px solid #FFF;
}

.corners-inner:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

This is not correct. I'm not trying to center absolutely positioned elements. I will have multiple dots in multiple locations over the relative background. I'm trying to get two different absolute positioned elements (the dot and the box) to scale equally so they are in the same spot at different screen sizes. — Davyd, Oct 12 '18 at 19:39
I suggest that, after you set corners and pulse at the center by top code you can create a parent for both with a static width and height and help javascript to move this parent with its child's (corners and pulse) — nyn05, Oct 12 '18 at 19:51

Issue with 2 absolute positioned elements not staying together on scale

1 Answers1