При наведении курсора картинка меняется на карту

240

21 июня 2022, 03:00

Подскажите пожалуйста, как реализовать смену картинки на карту при наведении курсора? Наверное, это делается с помощью hover, возможно я не прав. Нужно реализовать как здесь на сайта. https://kosmoplus.com/contacts

Answer 1

Вот небольшой пример без карты:

<style>
    .Container { width: 70%; position: relative; }
    .Google_map{
        position: absolute;
        top: 0; left: 0;
        opacity: 0; /* Hide our map */
        transition: opacity .25s ease-in-out;
    }
    .Container img {
        opacity: 1; /* Show image */
        width: 100%;
        transition: opacity .25s ease-in-out;
    }
    .Container:hover > .Google_map { opacity: 1; /* Show map */ }
    .Container:hover img { opacity: 0; /* Hide image */ }
</style>
<div class="Container">
    <!-- Image -->
    <img src="https://lh3.googleusercontent.com/proxy/MElHsgV1Gj7XJeUcv2sycvL0vJEqvuVYwwgOFwnXfb2UQNDxWXxUUYvaB9eitxacnQSJt-8fiS70Jji3qgWztWDINkfdq2-UdXsIpvAKEV79">
    
    <div class="Google_map">
        <!-- Container for you map -->
        Map
    </div>
  </div>

Посмотреть результат