CODEWITHSUNDEEP
htmlcssalignmentcss-position
Stevo
Stevo

Reputation: 3

Having trouble centering layered images, any ideas?

I'm having an issue centering a pair of layered images (before and after shots of the same image that switch on hover). In order to layer them on top of each other I gave them absolute and relative classes respectively, now I can't seem to get them to center in the page flow despite using the usual centering techniques for absolute elements. I've tried text align, align content, adjusting margins, etc. to no avail.

Any thoughts?

#GalleryThumbnails {
padding-bottom: 10em;
}


#crossfade {
position:relative;
height:281px;
}

#crossfade img {
position:absolute;
cursor: pointer;
border-radius: 10px;
transition: opacity .25s ease-in;
  -webkit-transition: opacity .25s ease-in;
  -moz-transition: opacity .25s ease-in;
  -o-transition: opacity .25s ease-in;
}

#crossfade img.top:hover {
opacity:0;
}
<div id="GalleryThumbnails">
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Hannah Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Hannah After Thumbnail Image' width='300'/>
        </div>
  </div>
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Stephen Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Stephen After Thumbnail Image' width='300'/>
        </div>
 </div>

Upvotes: 0

Views: 30

Answers (2)

satyajit rout
satyajit rout

Reputation: 1651

You can do it using display: flex;

#GalleryThumbnails {
  padding-bottom: 10em;
}

#crossfade {
  position:relative;
  height:281px;
  display: flex;
  align-items: center;
  text-align: center;
  margin: auto;
  width: max-content;
}

#crossfade img {
  cursor: pointer;
  border-radius: 10px;
  transition: opacity .25s ease-in;
  -webkit-transition: opacity .25s ease-in;
  -moz-transition: opacity .25s ease-in;
  -o-transition: opacity .25s ease-in;
}
#crossfade img:last-child{
  position: absolute;
}

#crossfade img.top:hover {
  opacity:0;
}
<div id="GalleryThumbnails">
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Hannah Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Hannah After Thumbnail Image' width='300'/>
        </div>
  </div>
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Stephen Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Stephen After Thumbnail Image' width='300'/>
        </div>
 </div>

Upvotes: 1

Luis felipe De jesus Munoz
Luis felipe De jesus Munoz

Reputation: 7933

Your #crossfade div should have display: table; and also one of your images should be position:relative;

See snippet below

#GalleryThumbnails {
padding-bottom: 10em;
}


#crossfade {
position:relative;
margin: 0 auto;
display: table;
}

#crossfade img {
position:absolute;
cursor: pointer;
border-radius: 10px;
transition: opacity .25s ease-in;
  -webkit-transition: opacity .25s ease-in;
  -moz-transition: opacity .25s ease-in;
  -o-transition: opacity .25s ease-in;
}

#crossfade img.top:hover {
opacity:0;
}
.bottom{
  position: relative !important;
}
.top{
  left: 0;
}
<div id="GalleryThumbnails">
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Hannah Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Hannah After Thumbnail Image' width='300'/>
        </div>
  </div>
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Stephen Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Stephen After Thumbnail Image' width='300'/>
        </div>
 </div>

Upvotes: 0

Related Questions