.d0imgbox01, .d0imgbox02 {margin: 1em 0; padding:0px; min-height:0px; border-radius: 30px; display:block; background-repeat: no-repeat !important; background-position: 40% !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important;}

.d0imgbox01 {background:url(/shared/images/content/bus_58408/EV-Charger-Installation-North_London-Imgbox01.webp);}
.d0imgbox02 {background:url(/shared/images/content/bus_58408/EV-Charger-Installation-North_London-Imgbox02.webp);}

.d0overlaybox {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 15px;
  min-width: 100%;
  min-height: 500px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  cursor: pointer;
}

/* The grey layer that expands from the cursor position */
.d0overlaybox::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(110, 110, 110, 0.75); /* adjust grey/opacity here */
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
  transition: clip-path 0.6s ease;
}

.d0overlaybox:hover::before {
  clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
}

/* Keep the box's content above the grey layer */
.d0overlaybox > * {
  position: relative;
  z-index: 1;
}

.loc-tags .loc {
  display: inline-block;
  background: #99C33D;
  color: #222;
  border-radius: 4px;
  padding: 4px 10px;      /* keeps the box tight around the text */
  margin: 0 4px 8px;     /* space between boxes (sides / below) */
  line-height: 1.4;
  white-space: nowrap;   /* stops a box breaking across two lines */
}