How to scale an image on hover with map over it

Question

I am having trouble scaling an image on hover, because it is being obstructed by map. Is it possible to do only with 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/

score 0 · Answer 1 · answered Jun 22 '18 at 10:54

You can change some CSS and HTML like below:

.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>

How to scale an image on hover with map over it

1 Answers1