How to make Yandex.Maps on the site initially displayed in black and white?

Question

css

I have the following fragment in my layout:

The site must have Yandex.Maps. As I understand it, initially they should be black and white, and when clicked, they should already open in their usual form. How to do it ?

Answer 1

<div id="map" class="black-and-white"></div>

.black-and-white {
  filter: grayscale(100%);
}

document.querySelector('#map').addEventListener('click', function() {
  this.classList.remove('black-and-white');
}, { once: true });

jsfiddle.net/0uays3d7

Answer 2

mb via JS, click event?

Answer 3

You can do it according to the instructions: https://ez-catalog.ru/kak-sdelat-cherno-beluyu-kar...