I need to showcase three images side by side without any gaps in between, and each image should have a clickable link on top. Additionally, the layout must be responsive to window size changes. Currently, there are spaces separating the images.
Below is the code I have been working with:
.callout-container {
position: relative;
bottom: 480px;
right: 0px;
}
.callout {
position: relative;
float: left;
Width: 33.3%;
}
.button-1 {
position: absolute;
top: 160px;
right: 1420px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
font-size: 20pt;
opacity: 0.9;
}
.button-2 {
position: absolute;
top: 160px;
right: 825px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
opacity: 0.9;
font-size: 20pt;
}
.button-3 {
position: absolute;
top: 160px;
right: 220px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
opacity: 0.9;
font-size: 20pt;
}<div class="callout-container">
<div>
<div class="callout-one callout">
<img src="callout_1.png" alt="">
</div>
<div class="callout-two callout">
<img src="callout_2.png" alt="">
</div>
<div class="callout-three callout">
<img src="callout_3.png" alt="">
</div>
</div>
<div>
<div>
<a href="" class="button-1" style="text-decoration:none;">
Property Owner?
</a>
</div>
<div>
<a href="" class="button-2" style="text-decoration:none;">
City Visitor?
</a>
</div>
<div>
<a href="" class="button-3" style="text-decoration:none;">
Teacher?
</a>
</div>
</div>
</div>Edit: Here's a snapshot of the current display for reference: screenshot