Добавление картинки на яндекс.карты

217

27 сентября 2018, 04:10

Я начинающий программист, пишу свой первый сайт. Столкнулся с такой проблемой:
не могу добавить картинку на карту так,чтобы при наведении она исчезала.
Выглядеть должно примерно как на скриншоте.

Answer 1

В лэнде:

<!-- iframe карты -->
<iframe>
    <div class="after_map"></div>
</iframe>

И в стиле

iframe{
    position: relative; // Или absolute или fixed
}
iframe .after_map{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(адрес/вашего/изображения);
}

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

Так же, чтобы изображение исчезало (jquery):

$('iframe').('hover', function(e){
    $(this).children('.after_map').fadeOut();
}, function(e){
    $(this).children('.after_map').fadeIn();
});

Answer 2

Если текст небольшой, можно использовать псевдоэлемент для элемента карты. и скрывать его при наведении.

*{ 
  box-sizing:border-box; 
} 
body{ 
  margin:0; 
} 
#map{ 
  height:200px; 
  background:linear-gradient(to right,yellow,orange); 
  position:relative; 
} 
#map:before{ 
  content:'text'; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  position:absolute; 
  z-index:100; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  opacity:1; 
  pointer-events:none; 
  background-color:rgba(100,100,100,.7); 
  transition:all .2s ease; 
  font:normal 900 70px/1 sans-serif; 
  color:#fff; 
  text-transform:uppercase; 
} 
#map:hover:before{ 
  opacity:0; 
}