Other images dissappears under the other one-CodePudding

When I try to make the two images appear in the same line they collapse with each other and one of them disappears under the other one . I tried it with table and without table but i couldn't do it. Basically what I'm trying to do is like an photo gallery images will appear in line.

.glass {
  font-size: larger;
  padding: 25px;
  position: absolute;
  top: 15%;
  left: 10%;
  text-align: center;
  word-wrap: break-word;
  width: 10%;
  letter-spacing: 5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

<table>
  <tr>
    <div >
      <div >
        <img src="https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=728&q=80" alt="">
        <div >Sicilian Pizza 15$</div>
      </div>
    </div>
  </tr>
  <tr>
    <div >
      <div >
        <img src="https://images.unsplash.com/photo-1613564834361-9436948817d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=743&q=80" alt="">
        <div >Classic Pizza 15$</div>
      </div>
    </div>
  </tr>
</table>

CodePudding user response：

I'm not entirely sure what you had in mind considering the various sizing and positioning rules you had set, but here's a guess. Eliminate the table (which was missing cell elements anyway), set the containers to inline-block, eliminate absolute positioning and floats, and change positions to margin.

.glass {
  display: inline-block;
  box-sizing: border-box;
  font-size: larger;
  padding: 25px;
  margin-top: 5%;
  margin-left: 5%;
  text-align: center;
  word-wrap: break-word;
  letter-spacing: 5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  max-width: 100px;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

<div >
  <div >
    <img src="https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=728&q=80" alt="">
    <div >Sicilian Pizza 15$</div>
  </div>
</div>

<div >
  <div >
    <img src="https://images.unsplash.com/photo-1613564834361-9436948817d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=743&q=80" alt="">
    <div >Classic Pizza 15$</div>
  </div>
</div>

CodePudding user response：

An easy way is to use flexbox or CSS Grid. Here is an overview of what you want (I think) using Grid:

*{
  box-sizing:border-box;
  margin:0;
}

.galleries{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  padding:2rem;
}

.gallery {
  padding: 25px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.gallery:hover {
  border: 1px solid #777;
}

img{
  width:100%;
  height:200px;
  object-fit:cover;
}

<div >

  <div >
    <img src="https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=728&q=80" alt="">
    <div >Sicilian Pizza 15$</div>
  </div>
  <div >
    <img src="https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=728&q=80" alt="">
    <div >Sicilian Pizza 15$</div>
  </div>
</div>

CodePudding user response：

because you were using position: absolute i fixed it but i didn't knew what you were planning to do with blur so i added it as overlay animation.

.container{
  position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.gallery{
  position:relative;
}
.glass{
  transition:1s ease;
    height:100%;
    width:100%;
    font-size: larger;
    position: absolute;
    text-align: center;
    word-wrap: break-word;
    letter-spacing: 5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}
  
div.gallery:hover {
    border: 1px solid #777;
}
  
div.gallery img {
    width: 100%;
    height: auto;
}
  
div.desc {
padding: 15px;
text-align: center;
}
.glass-holder:hover .glass{
  width:0%
}

<div >
  
        <div  >
            <div >
               <div  > </div>
                <img src="https://placekitten.com/640/360" alt="">
                <div >Sicilian Pizza 15$</div>
            </div>
        </div>
    
        <div  >
            <div >
              <div  > </div>
                <img src="https://placekitten.com/640/360" alt="">
                <div >Classic Pizza 15$</div>
            </div>
        </div>
    
</div>