CODEWITHSUNDEEP
htmlcssimageresponsive-designbootstrap-4
Deividas
Deividas

Reputation: 79

HTML CSS responsively stacking images in two columns

<html>
<head>
<style>
.container {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>

<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
  
</body>
</html>

What I'm trying to achieve, is making this type of effect to stack in two columns responsively. ( So that when I resize my window, images won't be streched )

And I can't do it. Could you please guide my on how can I achieve this effect? I can't even make two images to stack side by side on that fiddle, they seem to always stack in one column like this.

enter image description here

I've tried using Boostrap with container and col-lg-6, had no success.

Upvotes: 1

Views: 1523

Answers (3)

sol
sol

Reputation: 22959

You could wrap your image containers in a div with display: flex

updated as per comment

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.container {
  position: relative;
  min-width: 50%;
}

.image {
  opacity: 1;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  display: block;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
<div class="wrapper">

  <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
  <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
   <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
   <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
   <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
   <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
</div>

Upvotes: 1

Abstergo Industries 0x3
Abstergo Industries 0x3

Reputation: 16

Just inline the block and make sure the width is set such that two or more windows are able to fit. Simples.

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .container {
        position: relative;
        width: 40%;
        display: inline-block;
    }
    
    .image {
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
    }
    
    .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%)
    }
    
    .container:hover .image {
      opacity: 0.3;
    }
    
    .container:hover .middle {
      opacity: 1;
    }
    
    .text {
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      padding: 16px 32px;
    }
    </style>
    </head>
    <body>
    
    <h2>Opacity with Box</h2>
    <p>Hover over the image to see the effect.</p>
    
    <div class="container">
      <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
      <div class="middle">
        <div class="text">John Doe</div>
      </div>
    </div>
    
    <div class="container">
      <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
      <div class="middle">
        <div class="text">John Doe</div>
      </div>
    </div>
      
    </body>
    </html>

Upvotes: 0

adihaosd62as
adihaosd62as

Reputation: 102

The easiest way to do that is to use float:left but the you should add another elements wich resets the flow of the document, so that element should have the clear: both property.

<html>
<head>
<style>
.container {
    position: relative;
    width: 50%;
    float: left
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>

<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<p style="clear: both;"></p>
  
</body>
</html>

Upvotes: 0

Related Questions