How to put a div on another with responsive?

Asked

Viewed 982 times

1

Guys, I’m still a beginner, but I managed to make a 'gallery' for me, but I’m having difficulty putting an image and text on the items in this gallery. As you can see in the code below, when I define a HEIGHT, there is a huge border over between the first and the second line. Could someone help me? I looked for answers here, but I couldn’t implement them. I want to get the mask image to be the right size and position on each item, and the text, when I figure that out, I can try to line it up right. And I created a gallery so, and in it I was able to deploy it correctly, but it was limited. 

<!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>

html css css3

  • I don’t understand what your specific problem is. I’ve noticed that there are some mistakes, but which exactly are you needing help with?

  • There’s an image-mask div that I want to overlay every item in the gallery, but when an element descends into the gallery, there’s a huge edge between the first and second row.

1 answer

1

David, I don’t 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 amended

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

  • Sorry I wasn’t clear srsrsrrs You have the div image-mask, I want each item in the gallery to receive this image embedded, but when some item goes down, according to the screen size, the image-mask does not cover.

  • In this case, instead of using image as BG, it uses a linear-gradient. thus, you do not need to be adapting to each type of screen. with the text within the .imagem-mascara, your css should look like this .imagem-mascara {&#xA; position: relative;&#xA; width: 100%;&#xA; height: 100vh;&#xA; margin-top: -100vh;&#xA; background: linear-gradient(transparent 0, #000 100%);&#xA; float: left;&#xA; margin-bottom: 10px;&#xA;} and in .texto add a width of 100%

  • Man, thank you so much! It worked here as I wanted, I just gave some neat ones, but you saved me, thank you so much!

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.