Galera, sou iniciante ainda, mas consegui fazer uma 'galeria' para mim, porém estou com dificuldades de colocar uma imagem e um text sobre os ítens dessa galeria. Como podem ver no código abaixo, quando eu defino um HEIGHT, fica uma borda enorme sobre entre a primeira e a segunda linha. Alguém conseguiria me dar uma ajuda? Busquei respostas por aqui, mas nã consegui implementar. Quero fazer a imagem máscara ficar o tamanho e na posição correta em cada ítem, e o texto, quando resolver isso, posso tentar alinhar ele certinho. E á criei uma galeria ssim, e nela consegui implantar isso corretamente, mas ela era limitada entã decidi fazer essa.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:2px;
padding:0px;
background: RGB(25, 25, 25);
}
div.gallery img {
width: 100%;
height: 100%;
}
div.texto {
position:relative;
width: 100%;
height: 50px;
overflow: hidden;
top:-600px;
color: gray;
text-overflow: '...';
text-align: center;
font: bold 14px arial, sans-serif;
background-color:green;
}
div.imagem-mascara {
position:relative;
width:100%;
height:500px;
top:-535px;
background:url(https://uploaddeimagens.com.br/images/000/842/601/original/Sombra.png) 0 0 no-repeat;
background-size: 100% 100%;
float: left;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 1px;
float: left;
width: 25%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 33.3%;
margin: 3px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 33.3%;
}
}
</style>
</head>
<body>
<meta name="viewport" content="width=device-width, user-scalable=no" /> </meta>
<div class="responsive">
<div class="gallery">
<img src="https://uploaddeimagens.com.br/images/000/971/036/full/1.jpeg">
</div>
<div class="imagem-mascara" id="Naruto" onclick="Anime(this)"></div>
<div class="texto">Texto</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://uploaddeimagens.com.br/images/000/971/038/full/2.jpeg">
</div>
<div class="imagem-mascara" id="Naruto" onclick="Anime(this)"></div>
<div class="texto">Texto</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://uploaddeimagens.com.br/images/000/971/039/full/3.jpeg">
<div class="imagem-mascara" id="Naruto" onclick="Anime(this)"></div>
<div class="texto">Texto</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://uploaddeimagens.com.br/images/000/971/041/full/4.jpeg">
<div class="imagem-mascara" id="Naruto" onclick="Anime(this)"></div>
<div class="texto">Texto</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://uploaddeimagens.com.br/images/000/971/039/full/3.jpeg" >
<div class="imagem-mascara" id="Naruto" onclick="Anime(this)"></div>
<div class="texto">Texto</div>
</div>
</div>
</body>
</html>