Creating a responsive design in HTML and CSS to organize images into two columns that stack

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

My goal is to create a responsive layout with stacked images utilizing a hover effect similar to this example. However, I am facing difficulties in achieving this desired effect, especially when trying to make the images stack in two columns without stretching them during window resizing.

I have attempted using Bootstrap's container and col-lg-6 classes but have not been successful. Can someone provide guidance on how to accomplish this layout successfully?

https://i.sstatic.net/o41zCm.png

I've tried implementing various approaches, but so far, I haven't been able to achieve the desired outcome.

htmlcssimageresponsive-designbootstrap-4

Answer №1

You have the option to enclose your image containers within a div using display: flex

updated based on feedback

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

Answer №2

To simplify, just embed the block and ensure the width is adjusted to accommodate two or more windows. Easy peasy.

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

Answer №3

If you want to align elements side by side, using float: left is the simplest method. However, remember to include another element that resets the flow of the document with the property clear: both.

<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>
<!-- Repeat this container structure as needed -->
<p style="clear: both;"></p>
  
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular directive for concealing the 'ancestor' of an element

I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...

javascripthtmlcssangularjsangularjs-directive

Transforming segments into divisions

I recently designed a website using sections instead of divs in order to achieve the desired alignment of the divs within the same container. However, I am facing difficulties and confusion in implementing this approach. Currently, my divs collapse on top ...

htmlcsssections

The on-screen keyboard using JQuery and CSS is not working properly on an HTML redesign

UPDATE - Check out the modified version here: https://codepen.io/anon/pen/wZQjQy Here is the original for reference: https://codepen.io/anon/pen/YMRLBN (had to utilize CodePen, as simply adding a snippet here doesn't link the CSS) I essentially copie ...

javascriptjqueryhtmlcss

AngularJS causing issues with Materializecss dropdown menu operation

I'm currently working on a web application using Materializecss and AngularJS for the front-end. However, I've encountered an issue with the dropdown menu component of Materialize not functioning as expected. Here's an example of the dropdo ...

javascripthtmlcssangularjsmaterialize

The class styling is malfunctioning

When I click the 'night' button, I want the word color in the class=css to change to white. However, this is not working as intended, even though all other word colors are changing correctly. Here is my code: .css { font-weight: bold; ...

javascriptcss

Updating the appearance of a non-declared HTML child component on-the-fly using Angular

Trying to dynamically adjust the style of an unspecified div is causing some trouble. Using Angular and PrimeNG, invisible divs are being generated that I cannot access through inline styles. The objective is to allow a user to input a width as a string (5 ...

htmlcssangularsassprimeng

Using JQuery and CSS to handle multiple hyperlink links with a single action

UPDATE: Issue resolved, thanks for the help. It is working fine now: http://jsfiddle.net/c3AeN/1/ by Sudharsan I have multiple links on my webpage, all in a similar format like this: note: When I say 'similar format', I mean that all links share ...

javascriptjqueryhtmlcss

Creating a new file in Java to begin coding in HTML, CSS, and JavaScript

I recently completed a Java program that processes data and saves it in .JSON format. In addition, I have an HTML/CSS/JavaScript file that displays this data in a more visually appealing manner. My query is whether it's feasible to merge the Java an ...

javahtmljson

"Streamlining data entry with an uncomplicated HTML form input that accepts multiple values from a

As I understand it, a barcode scanner functions as nothing more than a keyboard that transmits keycode 13 after each scan. My task is straightforward: I have a basic form with only one input field and I want the ability to scan numerous barcodes and then c ...

javascriptphpjqueryhtmlforms

Struggling to incorporate a basic drop-down into my design despite implementing transitions

Looking to optimize space on a webpage, I am interested in creating a hover effect for topics that reveals sub-topics with a smooth ease-out animation. Here is an example of the effect I am aiming for: https://jsfiddle.net/170z6pj1/ I have been strugglin ...

htmlcsstransition

Is there a method to exclude children objects from spring animations during application?

Is it possible to create a fading in and out effect for a div (for example, to cycle through different backgrounds) while keeping its children (such as text) visible at full opacity at all times? {transitions((style, <animated.div class={ bg[i] + ...

htmlcssreactjsreact-spring

What CSS attribute determines the distinction in visual presentation between two elements that share the same CSS configurations?

In the HTML code below, there is a button and a div with the same class and content: <div class="root"><!-- --><button class="outer"><div class="middle"><div class="inner">label</div></div></button><!-- - ...

cssdebugging

Does CSS media query "@media only screen" only work when I am resizing the window?

I recently encountered an issue with the code found on this website (the repository can be viewed on Github here): @media only screen and (max-width: 600px) { img {width: 100%; height: 100%; margin: 0; padding: 0; } a.box { width: 100%; pa ...

cssfirefox

changing the css transformation into zoom and positioning

My goal is to incorporate pinch zoom and panning using hardware-accelerated CSS properties like transform: translate3d() scale3d(). After completing the gesture, I reset the transform and switch to CSS zoom along with absolute positioning. This method ensu ...

javascriptcssmulti-touchcss-transformshammer.js

Experience a unique double scrolling effect using the react-spring parallax and react-three-fiber Canvas components

My goal is to create a scrolling box with a parallax effect, but I'm facing an issue where it won't bind with the Canvas element, even when both are included under the same div. In the screenshot provided, you can see div1 and div2 each having t ...

htmlcssnext.jsreact-springreact-three-fiber

Issue arising from CSS and div elements

I am facing some challenges in making certain divs behave as desired. Take a look at the following references: Link 1: - contains two divs Link 2: - has only one div I am trying to utilize two divs (.content) without them being positioned incorrectly ...

csshtml

aligning a form vertically in a container

<div class="parent"> <div class="left-child"> <img src="logo.jpg" alt="logo"> </div> <div class="right-child"> <form action="#"> <input type="text" value="search"> &l ...

htmlcssforms

Issue with manipulating background color with JQuery in CSS

Currently, I have a simple navigation menu consisting of five links. The navigation bar is styled with a background image and changes to a darker shade when hovered over. My goal is to implement a jQuery script that dynamically changes the color of the act ...

jqueryhtmlcss

Customize your form fields with Bootstrap 3 input groups

Currently, I am working on implementing a bootstrap 3 input group, but unfortunately, the outcome is not meeting my expectations. My goal is to create a select [input]-[input text]-[button] structure all in one line. However, in my scenario, the button has ...

htmlcsstwitter-bootstrap-3

Use CSS media queries to swap out the map for an embedded image

Looking to make a change on my index page - swapping out a long Google Map for an embedded image version on mobile. The map displays fine on desktop, but on mobile it's too lengthy and makes scrolling difficult. I already adjusted the JS setting to "s ...

javascriptcssrubygoogle-mapsmedia-queries