How to put a div over another with responsive?

Question

How to put a div over another with responsive?

Navigation

#1 by (1 votes)

1

Galera, I'm a beginner, but I managed to make a 'gallery' for myself, but I'm having trouble putting an image and a text on the items in that gallery. As you can see in the code below, when I set a HEIGHT, it gets a huge edge on between the first and second line. Could someone help me? I searched for answers here but could not implement them. I want to make the mask image be the right size and position in each item, and the text, when I solve that, I can try to line it up right. And I created a gallery, so I could implement it properly, but it was limited so I decided to do that.

<!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><divclass="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><divclass="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"><divclass="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"><divclass="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"><divclass="imagem-mascara" id="Naruto" onclick="Anime(this)"></div>
  <div class="texto">Texto</div>
  </div>

</div>

</body>
</html>

html css css3

asked by anonymous 07.07.2017 / 19:49

1 answer

I want to click on a link when I click show a div and when I click on another link show another div and disappear the previous one Open .js file when MediaQuery is larger than 1024px

score 1 · Answer 1

David, I did not quite understand your question, but if it's just for the text to adapt to writing and stay where it is, your div text would basically look like this.

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;

}

Now if you want the text to overlap the image, you should make changes to html and css, which should look like this:

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 to be changed

<div class="imagem-mascara" id="Naruto" onclick="Anime(this)">
<div class="texto">Texto Texto Texto Texto Texto Texto Texto Texto</div>
</div>