Although I can get it to function properly, the trouble arises when I attempt to resize it for responsiveness, resulting in a strange scaling issue. Essentially, I want the images to remain at their natural size and align next to each other seamlessly without any gaps. Additionally, the text should be centered.
I've compiled everything into a JSFiddle with a relevant GIF. The GIF is crucial for understanding my dilemma.
I appreciate any assistance as I'm unable to solve this on my own.
Your help in advance is greatly appreciated.
<div class="aktivnostiList">
<div class="spacer">
</div>
<div class="coverRevija">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\revija\revijacover.jpg">
<div id="linkRevija"><h3 id="emphasis"><a href="#">Modna revija</a></h3></div>
</div>
<div class="spacerSmall"></div>
<div class="coverCajanka">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\cajanka\cajankacover.jpg">
<div id="linkCajanka"><h3 id="emphasis"><a href="#">Čajanka</a></h3></div>
</div>
<div class="spacerSmall"></div>
<div class="coverIzlozba">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\izlozba\izlozbacover.jpg">
<div id="linkIzlozba"><h3 id="emphasis"><a href="#">Izložba</a></h3></div>
</div>
.aktivnostiIntro{
width: 75%;
height: auto;
margin: auto;
margin-top: 100px;
text-align: center;
}
.covers{
width: 100%;
position: absolute;
z-index: -1;
left: 0;
}
.aktivnostiList{
text-align: center;
}
.coverRevija{
line-height: 227px;
}
.coverCajanka{
line-height: 227px;
}
.coverIzlozba{
line-height: 227px;
}