Responsive CSS images with overlays

Question

Responsive CSS images with overlays

I need to stack two images on top of each other while ensuring they remain responsive with a percentage width and height.

<div class="container">
    <img src="res/bigger.png/>
    <img src="res/smaller.png class="icon"/>
</div>

.container {
  width:100%;
  height:100%;
  background-color:blue;
  postion:relative;
}
.container img {
   max-width:100%;
   max-heihgt: 100%;
   height: auto;
   width: auto;
}
.icon {
   position: relative;
   top: -70%;
   left: 20%;
   z-index: 50;
   width: 10% !important;
   height: auto !important;
}

When resizing the page, the smaller image may lose its position relative to the larger image due to their different proportions. How can I ensure the smaller image remains in the correct position relative to the larger image even when the page is resized?
For a demonstration of this issue, you can visit this link

html image css responsive-design

Answer 1

Answer №1

Instead of using two images, consider replacing the largest image with a container like this:

<div class="the-crew">
  <img src="res/smaller.png" />
</div>

Then, adjust the positioning by setting the container to position:relative and the smaller image to

position:absolute</code:</p>

<pre><code>.the-crew {
  position: relative;
  width: 100px;
  height: 75px;
}

.the-crew img {
  position: absolute;
  top: 10px;
  left: 10px;
}

This method ensures that the smallest image remains in a fixed position, as its absolute positioning is relative to the container. One drawback is having to set minimum dimensions for the parent container, but the benefit is achieving the effect entirely through CSS without needing JavaScript.

Answer 2

Instead of using two images, consider replacing the largest image with a container like this:

<div class="the-crew">
  <img src="res/smaller.png" />
</div>

Then, adjust the positioning by setting the container to position:relative and the smaller image to

position:absolute</code:</p>

<pre><code>.the-crew {
  position: relative;
  width: 100px;
  height: 75px;
}

.the-crew img {
  position: absolute;
  top: 10px;
  left: 10px;
}

This method ensures that the smallest image remains in a fixed position, as its absolute positioning is relative to the container. One drawback is having to set minimum dimensions for the parent container, but the benefit is achieving the effect entirely through CSS without needing JavaScript.

Responsive CSS images with overlays

Answer №1

Similar questions

I want to use flexbox to center three divs on my webpage

The CSS styling is not being rendered correctly on the AngularJS HTML page

When using the <object> tag, it may not always render at 100% height as intended

Verify the functionality of the input fields by examining all 6 of them

I haven't quite reached success yet, but I am working on getting my slideshow to display on my local server

Utilizing Ajax to dynamically populate table columns

The alignment of the navigation menu disrupts the functionality of the dropdown sub-menus

The many potentials of looping through Sass maps

An easy way to incorporate an image into an HTML button

Comparing currency to double in handlebars: a comprehensive guide

What is the best way to responsively center an after pseudo-element above its parent?

Customize Your Wordpress Category Title with a Background Image

Picture is not appearing on the image carousel

Chrome is having trouble loading basic JavaScript

How can images from a dynamic table be converted to base64 format in Vue.js and then sent in a JSON file?

When attempting to select an option from the dropdown menu, I encounter an issue where the

How to Create a Compact JavaFX ComboBox

The children elements inside a parent div with Flexbox are now taking on the height of their container

What is the best way to dynamically update form fields in a database after making a selection in a <select> component?

Display the hidden element using jQuery with the !important rule