black1277

Сделано с использованием SVG. В нём есть прямоугольник растянутый на всю ширину и высоту страницы и с прозрачностью 0.4 Когда происходит наведение на дом - прозрачность меняется на 0.6 - происходит затенение. Также внутри SVG есть маска по контуру домов, поэтому они остаются светлыми.

измените свойство
outline: none;
Если bootstrap 5-й версии - можно добавить кнопкам класс shadow-none

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary shadow-none" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary shadow-none" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary shadow-none" for="btnradio3">Radio 3</label>
</div>

добавьте в стили кнопки pointer-events: none;

.upload {
    background: gold;
    height: 100%;
    pointer-events: none;
  }

и всё заработает как надо.

Почитайте про выравнивание строчных элементов, но учтите, что у картинки могут быть прозрачные поля. Поэтому используйте инструменты разработчиков в браузере для определения границ картинки.

Возьми в кавычки все классы в одинарные или двойные (нужно заэкранировать)

if (isset($_POST['currentTier']) && strpos($_GET['type'], 'placements')===false) $description .= "<div id=details-2 class='col-12 col-xl-4 col-lg-12 mb-xl-5 mb-5'><div class='d-flex b-skills'><div class='height:70px;'><div class='text-bold'>Текущая лига:</div> <div class='text-primary'> ".$tiers[$_POST['currentTier']]."</div></div></div></div></br>";