Criei este portfólio ele funciona perfeitamente no chrome, porém no firefox a tag button que fica sobreposta na tag img (para fazer o efeito de sombra e abrir um modal) aparece como um quinto item, gerando scroll horizontal e não fazendo o efeito de sombreamento quando o mouse passa em cima, gostaria de saber como deixar sobreposto no firefox!
Como fica no chrome:(como deveria ficar)
Como fica no firefox:
<style type="text/css">
.portfolio{margin-bottom: 100px; margin-top: 86px;display: flex; flex-wrap: wrap;}
.projetos{width: 25%;}
.projetos-content{position: relative;}
.projetos-img{width: 100%;}
.sombra{background: rgba(255,255,255,0.0); width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s; border: none;}
.sombra:hover{background: rgba(0, 0, 0, 0.4); cursor: pointer;}
</style>
<div class="portfolio">
<div class="projetos">
<div class="projetos-content">
<img src="1.jpg" class="projetos-img">
<button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>
</div>
</div>
<div class="projetos">
<div class="projetos-content">
<img src="2.jpg" class="projetos-img">
<button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>
</div>
</div>
<div class="projetos">
<div class="projetos-content">
<img src="3.jpg" class="projetos-img">
<button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>
</div>
</div>
<div class="projetos">
<div class="projetos-content">
<img src="1.jpg" class="projetos-img">
<button type="button" class="sombra" data-toggle="modal" data-target="#exampleModal"></button>
</div>
</div>
</div>