У меня есть простая веб-страница, размещенная на Heroku.Имеется 4 изображения, которые автоматически изменяют размер до 0x0, в то время как на локальном хосте оно отлично отображается.Я не могу понять, что происходит не так.
Как это выглядит на localhost 
Как это выглядит на heroku 
Серый фон - потому что следующий раздел имеет этот фон, что означает, что размер изображения равен 0x0.
Чтобы проверить, я проверял исходный код с помощью инструментов разработчика.
<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;
}
Спасибо!