Image in transition not styling to object-fit: cover;

Question

'Ello Stackoverflow!

I'm wondering if anyone could help me figuring this out. I found this Before/After image viewer by Jason Mayes and I was working on getting it to be responsively centered.

So I found "object-fit: cover;" and "object-position: 50% 50%;" to work great but I soon realised that the transition itself was not being styled that way, somehow.

I forked Jason's pen to show you more clearly: http://codepen.io/RogerAntonio/pen/rVXrma

I think the problem lies here somewhere:

.container img {
  object-fit: cover;
  object-position: 50% 50%;
  overflow: hidden;
}

.beforeAfter .before {
  z-index:2;
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

Thank you in advance!

Answer 1

The support for those object properties isn't great. I would try using inline background images on spans or divs and then setting a height.

<span class="image before" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272894/data/view-of-independence-square-in-kiev-data.jpg')" />
<span class="image after" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272868/data/site-of-anti-government-protest-in-kiev-data.jpg')" />

http://codepen.io/Hexl/pen/waVEKL