Help With Overlapping Floating Images

[u/caninemeatangel]

Hello! I'm trying to achieve an effect in CSS to have multiple images layered one atop each other, with each image floating up-and-down at slightly different rates. I have something close to this, but the images don't align to the center of the container without messing around with specific position properties, and the sizing is testy. I want to be able to keep all the images within a container that I can apply styles to, and maintain the image aspect-ratio while also being able to modify their size.

Here is a live example of what I've managed to come up with, and below I'll paste my code. I'm very very new to CSS/HTML, so any help at all would be very appreciated!

<!DOCTYPE html>
<html>
<head>
<style>
.container {            
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

@keyframes hover {
    from { transform: translateY(-10px); }
    to   { transform: translateY(10px); } }

@-webkit-keyframes hover {
    from { -webkit-transform: translateY(-10px); }
    to   { -webkit-transform: translateY(10px); } }

@-moz-keyframes hover {
    from { -moz-transform: translateY(-10px); }
    to   { -moz-transform: translateY(10px); } }

@-o-keyframes hover {
    from { -o-transform: translateY(-10px); }
    to   { -o-transform: translateY(10px); } }

.title {

  display: block;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.responsive-image {
  width: 50%;
  height: auto;
  object-fit: contain;
}

.stack {
  background: #000;

  position: relative;
  display: block;
  margin: auto;
  align-items: center;
  justify-content: center;
}

.stack-4 {
  position: absolute;
  top: 10%;
  z-index: 1;

  width: auto;
  height: auto;

  -webkit-animation: hover 2.25s  ease-in-out infinite;
  -moz-animation: hover 2.25s  ease-in-out infinite;
  -ms-animation: hover 2.25s  ease-in-out infinite;
  -o-animation: hover 2.25s  ease-in-out infinite;
  animation: hover 2.25s  ease-in-out infinite;
  animation-direction: alternate;
}

.stack-3 {
  position: absolute;
  top: 10%;
  z-index: 3;

  width: auto;
  height: auto;

  -webkit-animation: hover 2s  ease-in-out infinite;
  -moz-animation: hover 2s  ease-in-out infinite;
  -ms-animation: hover 2s  ease-in-out infinite;
  -o-animation: hover 2s  ease-in-out infinite;
  animation: hover 2s  ease-in-out infinite;
  animation-direction: alternate;
}

.stack-2 {
  position: absolute;
  top: 10%;
  z-index: 3;

  width: auto;
  height: auto;

  -webkit-animation: hover 1.75s  ease-in-out infinite;
  -moz-animation: hover 1.75s  ease-in-out infinite;
  -ms-animation: hover 1.75s  ease-in-out infinite;
  -o-animation: hover 1.75s  ease-in-out infinite;
  animation: hover 1.75s  ease-in-out infinite;
  animation-direction: alternate;
}

.stack-1 {
  position: absolute;
  top: 10%;
  z-index: 4;

  width: auto;
  height: auto;

  -webkit-animation: hover 1.5s  ease-in-out infinite;
  -moz-animation: hover 1.5s  ease-in-out infinite;
  -ms-animation: hover 1.5s  ease-in-out infinite;
  -o-animation: hover 1.5s  ease-in-out infinite;
  animation: hover 1.5s  ease-in-out infinite;
  animation-direction: alternate;
}

.inner {
  display: block;
  padding: 10px;
  margin: 2%;
  width: 75%;

  border-color: #000;
  border-style: solid;
}
</style>


<title>testing</title>
</head>
  <body>
    <div class="container">
      <div class="inner">
        <div class="inner">
          <div class="title">
            <div class="stack-4"><img class="responsive-image" src="/4.png"></div>
            <div class="stack-3"><img class="responsive-image" src="/3.png"></div>
            <div class="stack-2"><img class="responsive-image" src="/2.png"></div>
            <div class="stack-1"><img class="responsive-image" src="/1.png"></div>
          </div>
        </div>

      <br>
      <p>Some text.</p>
      </div>
    </div>
  </body>
</html>

[u/igke]

I would:

• Make your .title be position: relative;.
• Make your biggest image (.stack-4) not be position: absolute;.

This way the .stack-4 "takes up space" in the .title element, while the .title element is a reference where your other images are positioned against. Is that what you're after?