Making overlapping images central-CodePudding

Trying to make these pictures align in the center but every time i try to add alignment or margins they wont move, not sure if i added properties that mean it cannot move. I have tried to change the position to fixed on the img but it still wont center, only wany i can find is to manually position it with margins, however that is obviously not ideal.

Any help is greatly appreciated!

Heres the code on JSFiddle to make it a bit easier https://jsfiddle.net/dzk59p3u/3/

<html>
<head>

</nav>


    
<div class="box1">
<!-- <h1>W &nbsp;&nbsp;I &nbsp;&nbsp;L&nbsp; &nbsp;D</h1>-->
    <div class="cf">
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
      </div>
      </div>
    </div>
    <div class="cd">
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
      </div>
      </div>
    </div>

CSS

.cf {
    position: absolute;
    align-items: center;
  }

  .cf p {
    position: absolute;
    color: rgb(255, 255, 255);
    background-color: rgb(5, 5, 5);
    top:100%;
    left:50%;
    transform:translate(-50%, -50%);
  }
  .bottom {
  float: left;
  width: 33.33%;
  margin-top: 50px;
  margin-left: 50px;
  }

  .bottom img {
    width: 25%;
    margin-top: 50px;
    margin-left: 50px;
  }
  .cd img {
    display:block;
    align-content: center;
    position: relative;
    float: left;
    width: 33.33%;
    margin-top: 50px;
    margin-left: 50px;
    z-index: -1;
  }
  .cf img {
    display:block;
    align-content: center;
    position: relative;
    float: left;
    width: 33.33%;
    margin-top: 50px;
    margin-left: 50px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }
  .cf img.top:hover {
    opacity:0;
  }

CodePudding user response：

Put your images inside a container, and use display:flex on it. Setting align-items and justify-content to center will vertically and horizontally align the direct children of this container.

Then I'd put an additional container for each of your hover images. Set it to position:relative so its children are positioned relatively to it.

Finally, absolutely position your images inside your hover-container. I'd also use object-fit:cover so they don't stretch but are the same size.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  min-height: 100vh;
}

.hover-container {
  position: relative;
  width: 400px;
  height: 270px;
}

img.top,
img.bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit:cover;
  
}

img.top {
  transition: opacity 1s ease-in-out;
  z-index:1;
}

img.top:hover {
  opacity: 0;
}

<div class="container">

  <div class="hover-container">
    <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" />
    <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" />
  </div>
  
  <div class="hover-container">
    <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" />
    <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" />
  </div>

</div>