Есть ли способ кодировать кнопку, которая преобразует изображение на той же странице с помощью CSS / HTML?

Question

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

Итак, мой вопрос: каксвязать кнопку с изображением?

Я уже искал в интернете, но не смог найти решение. Я сам не смог найти решение, так как начинаю изучать css и html.

Я думаю, что мой код не нужен для решения моей проблемы.

Answer 1

Вот пример халявы. Добро пожаловать на SO!

scaleImg = (id) => {

  const el = document.getElementById(id);
  
  el.style.transform = 'scale(3)';

}

#testy {
  background: url('https://i.stack.imgur.com/BVW9D.jpg') no-repeat center;
  background-size: cover;
  height: 5rem;
  width: 5rem;
  
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translate(-20%, -20%);
  transition: transform 1s ease;
}

<div id="testy"></div>

<br/><br/>

<button onclick="scaleImg('testy')">Click Me</button>