<img alt="Cityscape photo from Max Bender" src="https://assets.codepen.io/605876/max-bender-city-scape.jpeg" />
<div class="controls">
  <fieldset>
    <legend>Zoom Spots</legend>
    <div class="controls__group">
      <label for="default">Default</label>
      <input checked type="radio" id="default" name="zoomies" value="default"/>
    </div>
    <div class="controls__group">
      <label for="bus">Bus</label>
      <input type="radio" id="bus" name="zoomies" value="bus"/>
    </div>
    <div class="controls__group">
      <label for="car">Car</label>
      <input type="radio" id="car" name="zoomies" value="car"/>
    </div>
    <div class="controls__group">
      <label for="walk">Walk Sign</label>
      <input type="radio" id="walk" name="zoomies" value="walk"/>
    </div>
    <div class="controls__group">
      <label for="mail">Mail Truck</label>
      <input type="radio" id="mail" name="zoomies" value="mail"/>
    </div>
    <div class="controls__group">
      <label for="stop">Bus Stop</label>
      <input type="radio" id="stop" name="zoomies" value="stop"/>
    </div>
    <div class="controls__group">
      <label for="peak">Peak</label>
      <input type="radio" id="peak" name="zoomies" value="peak"/>
    </div>
  </fieldset>
</div>
<footer>Photo by Max Bender on Unsplash</footer>

* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-weight: 300;
  font-family: sans-serif;
  color: hsl(0 0% 15%);
}

:root {
  --zoom-speed: 0.2s;
}

@property --inset-top {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 0%;
}
@property --inset-right {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 0%;
}
@property --inset-bottom {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 0;
}
@property --inset-left {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 0;
}

:root:has(#default:checked) {
  --inset-top: 0%;
  --inset-right: 0%;
  --inset-bottom: 0%;
  --inset-left: 0%;
}

:root:has(#bus:checked) {
  --inset-top: 58%;
  --inset-right: 59%;
  --inset-bottom: 25%;
  --inset-left: 24%;
}

:root:has(#car:checked) {
  --inset-top: 61%;
  --inset-right: 24%;
  --inset-bottom: 20%;
  --inset-left: 56%;
}

:root:has(#walk:checked) {
  --inset-top: 62%;
  --inset-right: 22%;
  --inset-bottom: 31%;
  --inset-left: 71%;
}

:root:has(#mail:checked) {
  --inset-top: 63%;
  --inset-right: 28%;
  --inset-bottom: 30%;
  --inset-left: 65%;
}

:root:has(#stop:checked) {
  --inset-top: 58%;
  --inset-right: 84%;
  --inset-bottom: 25%;
  --inset-left: 0%;
}

:root:has(#peak:checked) {
  --inset-top: 35%;
  --inset-right: 43%;
  --inset-bottom: 52%;
  --inset-left: 47%;
}

img {
  width: 50vmin;
  aspect-ratio: 1920 / 2402;
  object-view-box: inset(var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left));
  transition: --inset-top var(--zoom-speed),
              --inset-right var(--zoom-speed),
              --inset-bottom var(--zoom-speed),
              --inset-left var(--zoom-speed);
  transition-timing-function: ease-out;
}

footer {
  position: fixed;
  font-size: 0.875rem;
  padding: 2rem;
  bottom: 0;
  text-align: center;
}

.controls {
  position: absolute;
  left: calc(50% + 25vmin + 1rem);
}

.controls__group {
  display: flex;
}

label {
  flex: 1;
  margin-right: 1.5rem;
  opacity: var(--opacity, 0.5);
}

.controls__group:has(input:checked) label {
  --opacity: 1;
}

[type="radio"] {
  accent-color: hsl(280 10% 50%);
  outline: hsl(280 80% 50%);
}