Как масштабировать изображение при наведении курсора на карту

У меня проблемы с масштабированием изображения при наведении, потому что оно закрывается картой. Можно ли делать только с помощью CSS?

HTML

<html lang = "en" xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <meta charset = "utf-8" />
    <title>Mapa</title>
    <link rel = "stylesheet" type = "text/css" href = "styles.css" /> 
</head>
<body>
    <img class = "map01" id = "Image-Maps-Com-image-maps-2018-06-22-055007" src = "images/kraj.png" border = "0" width = "192" height = "156" orgWidth = "192" orgHeight = "156" usemap = "imgmap2018622121647" alt = "" />
    <map id = "imgmap2018622121647" name = "imgmap2018622121647"><area shape = "poly" alt = "" title = "" coords = "71,9,174,54,101,140,8,66" href = "" target = "" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
</body>
</html>

CSS

    .map01{
    transition: all .2s ease-in-out;
}

.map01:hover {
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);    
}

http://jsfiddle.net/wndgc63j/4/

html css

22.06.2018 12:39

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

467

Ответы 1

Вы можете изменить некоторые CSS и HTML, как показано ниже:

.map01{
    transition: all .2s ease-in;
}

map:hover + .map01 {
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);    
}

<html lang = "en" xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <meta charset = "utf-8" />
    <title>Mapa</title>
    <link rel = "stylesheet" type = "text/css" href = "styles.css" /> 
</head>
<body>
    <map id = "imgmap2018622121647" name = "imgmap2018622121647"><area shape = "poly" alt = "" title = "" coords = "71,9,174,54,101,140,8,66" href = "" target = "" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
    <img class = "map01" id = "Image-Maps-Com-image-maps-2018-06-22-055007" src = "https://image.ibb.co/cquqc8/kraj.png" border = "0" width = "192" height = "156" orgWidth = "192" orgHeight = "156" usemap = "imgmap2018622121647" alt = "" />
    
</body>
</html>

22.06.2018 12:54

Другие вопросы по теме

Анимация движущегося текста JavaScript не работает. ПОЛНЫЙ КОД

Css - автоматический список фотографий в сетке (угловой 6)

Изображение не отображается в codeigniter

Флажки странная ошибка на планшетах

Нужна панель навигации с подменю, которая при прокрутке должна отображать соответствующий текст с фиксированной шириной и высотой

Отзывчивый Hero-Image не работает на iPhone

Как установить максимальную ширину контейнера с помощью flexbox?

Как избавиться от лишней вертикальной полосы прокрутки?

Центральный блок в div с абсолютной позицией

Измерительный прибор в SVG с закругленным углом

Как масштабировать изображение при наведении курсора на карту

Ответы 1

Другие вопросы по теме

Похожие вопросы