1

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>

2
  • Não entendi qual é o seu problema específico. Eu percebi que há alguns erros, mas qual exatamente você está precisando de ajuda? 7/07/2017 às 17:52
  • Tem uma div imagem-mascara que quero que ela sobreponha cada ítem da galeria, mas quando um elemento desce na galeria, fica uma borda enorme entre a primeira e a segunda fileira. 7/07/2017 às 20:48

1 Resposta 1

1

David, eu não entendi muito bem sua pergunta, mas se for somente para o texto se adaptar a escrita e permanecer onde está, sua div text basicamente ficaria assim.

div.texto {
position: relative;
width: 100%;
height: auto;
padding: 15px 0;
overflow: hidden;
top: -600px;
color: gray;
text-align: center;
font: bold 14px arial, sans-serif;
background-color: green;

}

Agora se você quer q o texto se sobreponha a imagem, você deverá fazer alterações no html e css, que deverá ficar dessa forma:

CSS

.texto {
color: gray;
height: auto;
padding: 15px 0;
text-align: center;
font: bold 14px arial, sans-serif;
background: green;
position: absolute;
bottom: 0;
z-index: 2;
}

HTML a ser alterado

<div class="imagem-mascara" id="Naruto" onclick="Anime(this)">
<div class="texto">Texto Texto Texto Texto Texto Texto Texto Texto</div>
</div>
3
  • Desculpe não ter sido claro srsrrs Tem a div imagem-mascara, quero que cada ítem da galeria receba essa imagem encaixada, mas quando algum item desce, segundo o tamanho da tela, a imagem-mascara não cobre. 7/07/2017 às 20:45
  • Neste caso, em vez de usar imagem como BG, usa um linear-gradient. assim, você não precisa ficar adaptando para cada tipo de tela. com o texto dentro da .imagem-mascara, seu css devera ficar assim .imagem-mascara { position: relative; width: 100%; height: 100vh; margin-top: -100vh; background: linear-gradient(transparent 0, #000 100%); float: left; margin-bottom: 10px; } e em .texto adicione um width de 100% 9/07/2017 às 19:25
  • Cara, muito obrigado! Funcionou aqui como eu queria, só dei algumas ajeitadas, mas você me salvou, muito obrigado! 11/07/2017 às 1:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .