Images overlapping within a dynamic container

I am currently working with a responsive container that contains one image. The container and image resize well when the window size changes. However, I now need multiple images to overlap each other (all of the same size). How can I achieve this using HTML and CSS?

.pageCenter {
  display: block;
  max-width: 980px;
  margin: 0 auto;
  width:auto;
  float: none;
  border: 5px solid red;
}

.imageContainer img {
  display: block;
  margin: 0 auto;
  width:auto;
}

img {
  position: relative;
}
<div class="pageCenter">
  <div class="imageContainer">
    <img src="https://placeimg.com/400/200/nature" style="width:100%;" />
  </div>
</div>

htmlcss

Answer №1

If you want all images to sit in a specific row and column, you can utilize the grid property. They will automatically overlap and adjust within your container. Keep in mind that despite using the same picture, when inspected, the 3 images are stacked on top of each other:

.pageCenter {
  display: block;
  max-width: 980px;
  margin: 0 auto;
  width: auto;
  float: none;
  border: 5px solid red;
}

.imageContainer{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  margin: 0 auto;
  width: auto;
}

img {
  position: relative;
  grid-row: 1;
  grid-column: 1;
}
<div class="pageCenter">
  <div class="imageContainer">
    <img src="http://www.fillmurray.com/800/400" style="width:100%;" />
    <img src="http://www.fillmurray.com/800/400" style="width:100%;" />
    <img src="http://www.fillmurray.com/800/400" style="width:100%;" />
  </div>
</div>

It's important to note that not all browsers support the grid property. Check if your browser is compatible here.

Answer №2

.imageContainer {
  position:relative;
}

.imageContainer .img-1 {
  position:absolute;
  top:0;
  left:0;
}

.imageContainer .img-2 {
  float:left;
}

.clearfix {
  clear:both;
}
<div class="pageCenter">
    <div class="imageContainer">
         <img src="https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg" class="img-1" />
         <img src="https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg" class="img-1" />
         <img src="https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg" class="img-1" />
         <img src="https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg" class="img-2" />            
         <div class="clearfix"></div>
    </div>
</div>

Be sure to set the parent element to position:relative and the child images to position:absolute to avoid overlap issues.

Updated with new images which may cause overlapping.

Your code has been updated again.

Update #3: Remember to designate one image as position:absolute and the other as float, then include a clearfix element.

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

Twitter Bootstrap 3 - Change column order for extra small screens

My Twitter Bootstrap layout consists of two columns structured like this: <div class="col-md-4 col-sm-6 col-xs-12"> <div class="post"> Content here </div> </div> <div class="col-md-8 col-sm-6 col-xs-12"> <di ...

htmlcsstwitter-bootstrapgrid-layout

Halt the adhesion of the Bootstrap column when it hits the div section

I have a simple bootstrap row containing two columns: <div class="row"> <div class="col-xs-7"> <p>Walking together</p> </div> <div class="col-xs-5" id="stay"> <p>Joyful journey</p> </div ...

javascriptjquerycsstwitter-bootstrap

A guide to smoothly transition box-shadow with jQuery's addClass() function

UPDATED I have a div with the class .shadow-circle-lg: <div class="shadow-circle-lg"></div> To add a different border styling to the div, I am using another class called .circle-highlight: .circle-highlight{ box-shadow: 0 0 0 1px rgba(0,0, ...

jquerycss

Display loader while waiting for file to be loaded

I am utilizing ajax to retrieve a file. The loading animation is functioning properly with the ajax request, however, the file size is notably large. I am interested in implementing a preloader that will display until the file has finished loading. ...

javascriptjqueryarraysajaxcss

animation for closing the hamburger menu

Having trouble creating a hamburger menu animation. I've set up two divs - one for the basic horizontal lines and one for the X icon. Using jQuery, I can hide and show them (clicking on the lines hides them and shows the X). But now I want to animate ...

cssanimationmenu

TinyMCE - Utilizing selection.setContent along with getContent for the Warp Button

I am looking to implement a button that will wrap content with all tags. Snippet of Code: editor.addButton('MobileToggleArea', { text: '<M>', icon: false, onclick: function (){ editor.selection. ...

javascriptjqueryhtmltinymcetinymce-4

I'm looking to develop a straightforward panorama application for Windows Phone 7 utilizing PhoneGap/Cordova – any tips on where to start

After searching extensively, I couldn't find any examples of PhoneGap/Cordova-based HTML5 apps for Windows Phone 7 that demonstrate how to create a panorama or pivot style app. These are key features of the OS UI that I want to incorporate into my app ...

jqueryhtmlwindows-phone-7cordova

Dragging and dropping an HTML canvas element causes its width and height to be reset to zero

I am currently developing a customizable dashboard that allows users to rearrange dashboard tiles (represented by div elements) and position them anywhere within the dashboard. HTML Structure The HTML structure is outlined in the snippet below: <div cl ...

htmljquerycanvasdrag-and-dropchart.js

Issue with Dropdown Menu functionality while using multiple dropdown options

I am currently experimenting with dropdown menus from W3Schools and have encountered an issue when trying to implement two dropdown options. The code works fine for a single dropdown, but when I try to add a second one using GetElementsByClassName instead ...

javascripthtmlcsstwitter-bootstrap

Tips for placing modal box in the exact desired position upon loading

I've been searching for a solution on how to dynamically calculate the position of each image loaded in a Twitter modal box and place the box underneath a custom toolbar element I have created. The situation is depicted in the image. The height of the ...

javascriptjqueryhtmltwitter-bootstrap

Rows nested within the Bootstrap grid system

Looking to implement a nested grid within a parent grid in Bootstrap 3.3.7. Check out the HTML below: Parent component <div> <div class="row"> <div class="col-md-3 border">.col-md-3</div> // <div class="col-md-9 ...

htmlcssangulartwitter-bootstraptwitter-bootstrap-3

The link that has been clicked on should remain in an active state

Is there a way to make the link that is clicked on active? I have attempted various scripts but have had no luck in getting the desired effect. Can anyone identify what might be causing the issue? $("a").click(function () { if ($(this).hasClass("acti ...

javascripthtmljquerycss

Using JavaScript and PHP to dynamically update a field based on two input values within a row of a table

Currently in the process of developing a dynamic profit margin calculator for a personal project. Overview Data is retrieved from a database table using SQL and PHP After necessary validations, the data is dynamically displayed as rows in an HTML table ...

javascriptphpjqueryhtml

Ensure all vertically stacked boxes maintain the same height using Flexbox technology

My design includes a series of links styled as larger boxes, with varying content and height. Using flexbox to ensure equal heights on each row is straightforward. I'm utilizing the Bootstrap grid layout, but when the boxes stack vertically (one per r ...

htmlcssresponsive-designflexbox

creating a new page upon clicking a div element

I need assistance in creating an effect similar to the one found on this website - where clicking on a div opens a new page. ...

jqueryhtmljquery-uidom

What is the best way to show the selected values of dropdown and checkboxes on a redirected page for confirmation using PHP?

<form action="action.php" method="POST" target="_self"> <table class="main" border="1" height="100%" align="center">t; <h3> <p id="id1" style="background-color: #9FF" >Registration form</p></h3> <tr><t ...

phphtml

Tips for maximizing page layout efficiency without compromising on element visibility

What is occurring https://i.stack.imgur.com/Agjw6.gif The use of .hide() and .fadeIn(200) is resulting in a jittery effect that I would like to avoid. Desired Outcome When the user hovers over the menu icon, the menu icon should vanish the text "Pr ...

javascriptjqueryhtmlcss

Creating a navigation bar in React using react-scroll

Is anyone able to assist me with resolving the issue I am facing similar to what was discussed in React bootstrap navbar collapse not working? The problem is that although everything seems to be functioning properly, the navbar does not collapse when cli ...

htmlcssreactjs

Unable to be implemented using inline-block styling

I'm struggling to get these 2 elements to display side by side using inline-block, I've tried everything but nothing seems to work. Goal: First element Second element I attempted to modify the HTML code to see if it would yield any results, b ...

htmlcsstwitter-bootstrapvue.js

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

I am having an issue with a number input box on iOS. I am utilizing jquery, kendo mobile, and HTML5 for this particular task. While the number input displays up and down arrows in the Icenium simulator, they are not showing on the iPad. I am seeking a sol ...

ioscsshtmlinputkendo-mobile