Divs placed over image in precise locations as links

I am trying to place images of plums on a tree as links to other pages. I have tried many different approaches and i am sure it is something that is considered easy but my image always ends up on the bottom of the screen. i want the interiors link to be absolutely placed over the menu picture. This is the code i have now. removed the div and css to eliminate confusion.

<!DOCTYPE html>

<html>

<head>
<title></title>
<style type="text/css">
html, body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica   Neue",       Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300;
width: 99%;
height:100%;
}

.css-slideshow{
border:3px solid;
border-color:#035747;
position: relative;
left:0;
right:0;
max-width: 100%;
width:100%;
height: 82%;
margin: 0;
}

.css-slideshow figure{
margin: 0;
height: 100%;
width:100%;
background: #000;
position: absolute;
}
.css-slideshow img{
box-shadow: 0 0 2px #666;
}

.css-slideshow-attr{
max-width: 495px;
text-align: right;
font-size: .7em;
font-style: italic;
margin:0 auto;
}
.css-slideshow-attr a{
 color: #666;
 }
.css-slideshow figure{
opacity:0;
}
figure:nth-child(1) {
animation: xfade 42s 36s infinite;
}
figure:nth-child(2) {
animation: xfade 42s 30s infinite;
}
figure:nth-child(3) {
animation: xfade 42s 24s infinite;
}
figure:nth-child(4) {
 animation: xfade 42s 18s infinite;
}
figure:nth-child(5) {
animation: xfade 42s 12s infinite;
}
figure:nth-child(6) {
 animation: xfade 42s 6s infinite;
}
figure:nth-child(7) {
animation: xfade 42s 0s infinite;
}


@keyframes xfade{
0%{
opacity: 1;
}
25% {
opacity:1;
}
45% {
opacity:0;
}
65%{
opacity: 0;
}
100% {
opacity:1;
}
}

.menu{
position:relative;
width: 100%;
height: 100%;
border:3px solid;
border-color:#035747;
margin:0;
display: block;
}

.interior{
position:absolute;
left: 35px;
top: 35px;
}

</style>

</head>

<body>


<div class="css-slideshow"> 
<figure> 
<img src="Balc.jpg"  width="100%" height="100%" />   
</figure> 
<figure> 
<img src="Rock w Column.jpg"  width="100%" height="100%" />    
</figure> 
<figure> 
<img src="pool.jpg"  width="100%" height="100%" />  
</figure> 
<figure> 
<img src="Purple white flowers_jefferson.jpg"  width="100%" height="100%"    />
</figure> 
<figure> 
<img src="lawn_Wickson.jpg" width="100%" height="100%"  />  
</figure> 
<figure> 
<img src="path.jpg"  width="100%" height="100%"   />  
</figure> 
<figure> 
<img src="flowers toward wickson.jpg" width="100%" height="100%" />
</figure> </div>

<div class="menu" >
<img src="three_trees_without_plums.jpg" width="100%" height="100%" />
</div>

<a HREF="interiors.html"><IMG SRC="plum.png"></a>

</body>
</html>

I need the divs that are placed to hold there position on all screen sizes. Any help would be greatly appreciated.