.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

svg, defs, clipPath {
height: 0; 
position: absolute; 
top: 0; left: 0;  
}

#figura {
position: relative; 
width: 1400px; height: 520px; 
margin: 10px auto; 
overflow: hidden; 
background-color: white;
}
#figura::before {
display: block; 
content: ""; 
position: absolute; 
top: 0; left: 0; 
background-image: url('http://bestinlisbon.pt/img/gallery/full/CAM_01B_FRONT_02__gal2.jpg'); 
background-size: cover;  
opacity: .4;
width: 1400px; height: 520px; 
}

#capaRecorte {
display: block; 
position: absolute; 
top: 0; left: 0; 
width: 1400px; height: 520px; 
}

#imagen {
width: 1400px; height: 520px; 
position: absolute;
top: 0; left: 0; 
cursor: crosshair; 
}

#figura area {
display: block; 
}


#figura area:nth-of-type(1):hover ~ #capaRecorte {
-webkit-clip-path: polygon(93px 100px, 93px 200px, 320px 200px, 320px 100px);
clip-path: url(#A1); 
}

#figura area:nth-of-type(2):hover ~ #capaRecorte {
-webkit-clip-path: polygon(350px 100px, 350px 200px, 700px 200px, 700px 100px);
clip-path: url(#B1); 
}

#figura area:nth-of-type(3):hover ~ #capaRecorte {
-webkit-clip-path: polygon(720px 100px,720px 180px, 960px 180px, 960px 100px);
clip-path: url(#A2); 
}

#figura area:nth-of-type(4):hover ~ #capaRecorte {
-webkit-clip-path: polygon(1020px 100px, 1020px 180, 1350px 180px, 1350px 100px);
clip-path: url(#B2); 
}

#figura area:nth-of-type(5):hover ~ #capaRecorte {
-webkit-clip-path: polygon(85px 200px, 85px 270px, 240px 270px, 240px 200px);
clip-path: url(#A3); 
}

#figura area:nth-of-type(6):hover ~ #capaRecorte {
-webkit-clip-path: polygon(85px 280px, 85px 350px, 240px 350px, 240px 280px);
clip-path: url(#B3); 
}

#figura area:nth-of-type(7):hover ~ #capaRecorte {
-webkit-clip-path: polygon(85px 360px, 85px 450px, 240px 450px, 240px 360px);
clip-path: url(#A4); 
}

#figura area:nth-of-type(8):hover ~ #capaRecorte {
-webkit-clip-path: polygon(260px 200px, 260px 270px, 500px 270px, 500px 200px);
clip-path: url(#B4); 
}


#figura area:nth-of-type(9):hover ~ #capaRecorte {
-webkit-clip-path: polygon(260px 280px, 260px 270px, 500px 270px, 500px 280px);
clip-path: url(#Apt_P); 
}


#figura area:nth-of-type(10):hover ~ #capaRecorte {
-webkit-clip-path: polygon(340px 360px, 340px 450px, 500px 450px, 500px 360px);
clip-path: url(#Apt_N); 
}

#figura area:nth-of-type(11):hover ~ #capaRecorte {
-webkit-clip-path: polygon(550px 200px, 550px 270px, 700px 270px, 700px, 200px);
clip-path: url(#Apt_R); 
}

#figura area:nth-of-type(12):hover ~ #capaRecorte {
-webkit-clip-path: polygon(550px 280px, 550px 350px, 700px 350px, 700px 280px);
clip-path: url(#Apt_O); 
}

#figura area:nth-of-type(13):hover ~ #capaRecorte {
-webkit-clip-path: polygon(550px 360px, 550px 450px, 700px 450px, 700px 360px);
clip-path: url(#Apt_M); 
}

#figura area:nth-of-type(14):hover ~ #capaRecorte {
-webkit-clip-path: polygon(720px, 200px, 720px, 270px, 800px, 270px, 800px, 200px);
clip-path: url(#Apt_I); 
}

#figura area:nth-of-type(15):hover ~ #capaRecorte {
-webkit-clip-path: polygon(720px, 280px, 720px, 350px, 800px, 350px, 800px, 280px);
clip-path: url(#Apt_F); 
}

#figura area:nth-of-type(16):hover ~ #capaRecorte {
-webkit-clip-path: polygon(720px, 360px, 720px, 450px, 800px, 450px, 800px, 360px);
clip-path: url(#Apt_B); 
}

#figura area:nth-of-type(17):hover ~ #capaRecorte {
-webkit-clip-path: polygon(820px 200px, 820px 270px, 1190px 270px, 1190px 200px);
clip-path: url(#Apt_H); 
}

#figura area:nth-of-type(18):hover ~ #capaRecorte {
-webkit-clip-path: polygon(820px, 280px, 820px, 350px, 1190px, 350px, 1190px, 280px);
clip-path: url(#Apt_E); 
}

#figura area:nth-of-type(19):hover ~ #capaRecorte {
-webkit-clip-path: polygon(820px 360px, 820px 450px, 970px 450px, 970px 360px);
clip-path: url(#Apt_A); 
}

#figura area:nth-of-type(20):hover ~ #capaRecorte {
-webkit-clip-path: polygon(1200px 200px, 1200px 270px, 1350px 270px, 1350px 200px);
clip-path: url(#Apt_G); 
}

#figura area:nth-of-type(21):hover ~ #capaRecorte {
-webkit-clip-path: polygon(1200px 280px, 1200px 350px, 1350px 350px, 1350px 280px);
clip-path: url(#Apt_D); 
}

#figura area:nth-of-type(22):hover ~ #capaRecorte {
-webkit-clip-path: polygon(1150px 360px, 1150px 450px, 1250px 450px, 1250px 360px);
clip-path: url(#Apt_C); 
}