I attempted to layer multiple images on top of each other, but unfortunately, the background has disappeared

I am attempting to align a series of images together, but I seem to have lost the background in the process. I am using "position:absolute" and while the images stack nicely due to their correct sizes, there seems to be an issue with the backgrounds. My goal is to arrange 3 eggs in a row, hence why I have placed the .egg-container inside the .container.

The images: top-egg bottom-egg 

        .container{
            max-width: 50%;
            height: auto;
            background-color: blue;
            margin: 100px auto;
        }

        .container-egg{
            width:21%;
            height:auto;
            margin: 30px auto;
            background-color: red;
            position: relative;
        }

        .bottom{
            z-index:2;
        }

        .top{
            z-index:3;
            transform: rotate(0deg);
            margin-top: -0px; 
            transition: margin-top .2s;
        }
        
        .container-egg:hover > .top{
            margin-top: -100px;
            transform: translate(10px, 0) rotate(10deg);
        }

        .position{
            width: 100%;
            position: absolute;
        }
    <div class="container">
         <div class="container-egg">
             <img src="https://i.sstatic.net/fY5Cp.png" class="bottom position">
             <img src="https://i.sstatic.net/bQwum.png" class="top position">
         </div>
    </div>

htmlcss

Answer №1

If your goal is to create something similar to the following:

Check out this JSFiddle

Here is the CSS code:

.container {
  max-width: 50%;
  background-color: blue;
  display: block;
}

img.top,
img.bottom {
  width: 100%;
}

.container-egg {
  display: inline-block;
  width: 21%;
  background-color: red;
  position: relative;
}

.bottom {
  z-index: 2;
}

.top {
  z-index: 3;
  transform: rotate(0deg);
  margin-top: -0px;
  transition: margin-top .2s;
}

.container-egg:hover>.top {
  margin-top: -100px;
  transform: translate(10px, 0) rotate(10deg);
}

.position {
  position: absolute;
  top: 0px;
  right: 0px;
}

And here is the HTML code:

<div class="container">
  <div class="container-egg">
    <img src="https://i.sstatic.net/fY5Cp.png" class="bottom">
    <img src="https://i.sstatic.net/bQwum.png" class="top position">
  </div>
  <div class="container-egg">
    <img src="https://i.sstatic.net/fY5Cp.png" class="bottom">
    <img src="https://i.sstatic.net/bQwum.png" class="top position">
  </div>
  <div class="container-egg">
    <img src="https://i.sstatic.net/fY5Cp.png" class="bottom">
    <img src="https://i.sstatic.net/bQwum.png" class="top position">
  </div>
</div>

Answer №2

When both elements are positioned, they are removed from the normal flow, making them no longer considered in calculating the height of their container. As a result, the container ends up with a height of 0.

To rectify this issue, ensure that only one image is positioned:

.container {
  max-width: 50%;
  background-color: blue;
  margin: 100px auto;
}

.container-egg {
  width: 21%;
  margin: 30px auto;
  background-color: red;
  position: relative;
}
img {
 max-width:100%;
}
.top {
  z-index: 3;
  transform: rotate(0deg);
  margin-top: -0px;
  transition: margin-top .2s;
}

.container-egg:hover>.top {
  margin-top: -30px;
  transform: translate(10px, 0) rotate(10deg);
}

.position {
  width: 100%;
  position: absolute;
  top:0;
  left:0;
}
<div class="container">
  <div class="container-egg">
    <img src="https://i.sstatic.net/fY5Cp.png" >
    <img src="https://i.sstatic.net/bQwum.png" class="top position">
  </div>
</div>

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

Transform URL Structure with UrlRewrite and htaccess - A Step-by-Step Guide

Currently, I am using the following URL: http://server.com/index.php?page1=main&page2=contacts I would like to change it to: http://server.com/main/contacts Can anyone provide guidance on how to write an .htaccess file with sample code for this red ...

phphtml.htaccessurlurl-rewriting

Adjust the value based on selection

I aim to display another div when either the Full Time or Part Time option is selected. Additionally, I would like to calculate a different value for each option; if 'Part Time' is chosen, PrcA should change to PrcB. Here is the code snippet tha ...

javascripthtmlfunctionselect

An image spanning two columns on a page with three columns

I am currently utilizing Foundation 4 for my website design. I am attempting to create an image that spans over 2 columns in a 3-column layout using the Foundation grid system. Here is how I envision it: https://i.sstatic.net/m7InR.jpg I am wondering if ...

csszurb-foundation

ReactStrap: If the dropdown list is too long, users may have trouble viewing the final values

Currently, I'm facing an issue with a dropdown list that is taking up the entire screen and hiding some items. Here's the code snippet for reference: const statusSearchDropDownValues = ( <Row className="align-items-center"> <Col c ...

cssreactjstwitter-bootstrapbootstrap-4reactstrap

How can you identify when an input value has been modified in Angular?

For my current project, I am developing a directive to be used with a text input field in order to format currency input. This directive has two HostListeners - one for when the input loses focus and one for when it gains focus. When the blur event occurs, ...

javascripthtmlangularangular2-directives

Issue: The function _lib_getAllUsers__WEBPACK_IMPORTED_MODULE_2___default(...) is not recognized as a valid function

I'm currently following the YouTube series on Next.js by Dave Gray. My goal is to import a function from the file "lib/getAllUsers" https://i.sstatic.net/1SQMg.png However, I'm encountering the following error: Unhandled Runtime Error Error: ...

javascripthtmlreactjswebnext.js

Font size transition on pseudo elements is not functioning properly in Internet Explorer when using the "em" unit

When I hover over, the font awesome icon and text on this transition increase in size. All browsers work well with this effect except for IE 11. This example demonstrates the same transition using px (class test1) and em (class test2). While using px wor ...

cssinternet-explorerinternet-explorer-11

Incorporate Text, HTML, and Embed Images into PHPWord

I am currently utilizing PHPWord to create word documents using PHP. I have a specific content format that I need to adhere to, as shown below: Title Description Image1 Image1 Description(HTML CONTENT) Image2 Image2 Description(HTML CONTENT) As of now ...

phphtml

Press a button to navigate through a series of web pages

Currently, I am working on a website focused on profiles. The challenge I am facing is implementing fixed side buttons (SKIP and ADD) that will cycle through the list of profiles. I understand that I may need to create an array to store all the profiles, ...

javascripthtmlarraysbutton

Using Symfony2 Knp-snappy library for PDF generation, the CSS styling is not being properly imported

Attempting to create a PDF from an html.twig template, but facing some issues... Although the content is correct in the PDF, the layout is missing. It appears that the CSS files are not being imported... Bootstrap from Twitter is being used to handle the ...

phpcsstwitter-bootstrapsymfonypdf

Connect your HTML page to your CHtml page

Can anyone guide me on how to link a button in an HTML page to a chtml page within an ASP MVC project? image description here ...

htmlasp.net-mvc

What are some solutions for resolving JavaScript's 'undefined' error?

(function(window) { var johnGreeter = {}; johnGreeter.name = "John"; var greeting = "Hello "; johnGreeter.sayHello = function() { console.log(greeting + johnGreeter.name); } window.johnGreeter = johnGreeter; })(window); // <!DOCTYPE html ...

javascripthtmlundefined

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

Presented here is a straightforward component called Text.svelte. It utilizes a CSS variable to prevent unnecessary duplication: <div> <span class="t1">t1</span> <span class="t2">t2</span> </div> ...

csssveltevite

Why does Chrome keep retrieving an outdated JavaScript file?

Lately, I've been facing a frustrating issue that I just can't seem to figure out. Every now and then, when I update the JavaScript or CSS files for my website hosted on Siteground, Chrome simply refuses to acknowledge the changes. While other br ...

javascripthtmlgoogle-chromecachingbrowser-cache

Troubleshooting Problem with Website Responsiveness on iPhones Using Bootstrap 5

I am currently experiencing a challenge involving the responsiveness of a website I am developing, particularly when it comes to iPhones. The site utilizes Bootstrap 5 and displays correctly on Android devices and in Chrome Dev Tools. However, upon testing ...

javascripthtmlcssiphonebootstrap-5

What is the best way to choose a range of nodes with dynamic limitations without relying on static positions?

<li></li> <th> <li></li> <strong>"Jeff"<strong> <li></li> <a>"Mary"<a> <li></li> <th> <li></li> <strong>"Rich"<strong> <li></li&g ...

htmlxmlseleniumxpath

Compile an ASP.NET website into static files such as HTML, CSS, and JavaScript prior to deployment

Can a simple ASP.NET website without ASP webform or .NET controls be precompiled into static files such as HTML, CSS, and JavaScript? I am interested in utilizing the master page feature and Visual Studio IDE intellisense while still being able to deploy ...

asp.netasp.net-mvcvisual-studio-2010html

Inject a jQuery form submission using .html() into a div element

I am currently working on developing a basic forum where users can view listed topics and have the option to add new ones on-the-fly by clicking a link or image. How can I detect and handle the form submission event for the dynamically added form within an ...

javascriptjqueryhtmlforms

tips for reducing the size of the recaptcha image to display just one word

The custom recaptcha theme I'm working with requires the image to be smaller in width but not in height. Is there a way to achieve this requested design? ...

phpcssrecaptcha

What is the best way to create a miniaturized image of a webpage for sharing on Facebook?

I'm looking for a way to post a link to users' Facebook walls with a thumbnail image of their created page. The page is in HTML format and stored as a series of 'elements' in the database, each with its size, position, and content. Is i ...

phphtmlfacebookthumbnails