html: add link to overlapping images [pic] - html

Question

with a lot of trialnerror and grinding on stack, I (we) have managed to get two images to overlap in a very specific way:
This has been achieved like so:
.container {
width: 900px;
margin: auto;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container_2 {
position: relative;
padding-top: 41.3%;
}
.imageContainer {
width: 70%;
position: absolute;
top: 0;
}
.psuedoContainer {
position: relative;
padding-top: 59%;
}
.psuedoHolder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
height: 100%;
width: auto;
}
<div class="centered">
<div class="container">
<div class="component">
<div class="container_2">
<div class="imageContainer" style="left: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: left;">
<img src="./img/img_codemesomething.png" />
<a href="page_appDev.html"/>
</div>
</div>
</div>
<div class="imageContainer" style="right: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: right;">
<img src="./img/img_recordmesomething.png" />
<a href="http://google.de"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And as you can see, there are two links included into the main two pictures (HTML).
However, only one of the two is working (the google one isnt). This is probably because one images is sort of "above" the other one, and therefore the lower one can never be clicked. At least it cannot be clicked just like it is right now.
How would I go on about adding a link to both images, that, wherever the user clicks, except for in the white part between both images, the user gets directed to a different page?
Thank you :)

Answer 1

you can wrap the images with the a tag
.container {
width: 900px;
margin: auto;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container_2 {
position: relative;
padding-top: 41.3%;
}
.imageContainer {
width: 70%;
position: absolute;
top: 0;
}
.psuedoContainer {
position: relative;
padding-top: 59%;
}
.psuedoHolder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
height: 100%;
width: auto;
}
<div class="centered">
<div class="container">
<div class="component">
<div class="container_2">
<div class="imageContainer" style="left: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: left;">
<a href="https://stackoverflow.com/questions/55650192/html-add-link-to-overlapping-images-pic/55650729#55650729"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
</a>
</div>
</div>
</div>
<div class="imageContainer" style="right: 0;">
<div class="psuedoContainer">
<div class="psuedoHolder" style="text-align: right;">
<a href="https://stackoverflow.com/"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>