I have encountered an issue with my simple webpage hosted on Heroku. Despite appearing perfectly fine on localhost, 4 images are automatically resized to 0x0 when viewed on Heroku. I am struggling to identify the cause of this problem.
Here is how it appears on localhost: https://i.sstatic.net/BIjax.jpg
And here is the distorted view on Heroku: https://i.sstatic.net/Sb6tt.jpg
The grey background you see is due to the next section having that background color, indicating that the image size has been set to 0x0.
To investigate further, I inspected the source code using developer tools. https://i.sstatic.net/cP647.jpg
<div class="section2">
<div class="heading">POWERED BY</div>
<div class="logos">
<a href="https://www.jamboreeindia.com/">
<div class="sponsor-logo">
<img src="jamboree3.png" class="overlay-logo">
<img src="jamboree.png" class="original-logo">
</div>
</a>
<a href="http://www.megalogix.org/">
<div class="sponsor-logo">
<img src="mcs2.png" class="overlay-logo">
<img src="mcs.png" class="original-logo">
</div>
</a>
</div>
</div>
CSS
.section2{
width: 100vw;
padding: 5px 0 0 0;
}
.heading{
text-align: center;
font-weight: 700;
color: #9FACCC;
}
.heading2{
text-align: center;
font-weight: 700;
color: #333;
font-size: 35px;
}
.logos{
width: 100vw;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.sponsor-logo img{
width: 150px;
height: auto;
margin: 50px;
}
.original-logo {
z-index: 1;
opacity: 0;
transition: all .3s ease;
}
.overlay-logo {
position: absolute;
z-index: 3;
transition: all .3s ease;
}
.overlay-logo:hover {
opacity: 0;
transition: all .3s ease;
}
.overlay-logo:hover + .original-logo {
opacity: 1;
transition: all .3s ease;
}
Your insights and assistance would be greatly appreciated!