CODEWITHSUNDEEP
htmlcsscss-transitions
Roger Antonio
Roger Antonio

Reputation: 53

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

'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!

Upvotes: 5

Views: 5175

Answers (2)

Erkki Teedla
Erkki Teedla

Reputation: 319

Object-fit is known to break with transitions. I suggest using an alternative way of repositioning your image - e.g with CSS transform property:

.container img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

You will need to overlook your styles so that some other redundant declarations would not override positioning. You might need to add some vendor prefixes to make this work in different browsers. Slightly modified fiddle here

Upvotes: 1

Adam Hughes
Adam Hughes

Reputation: 2277

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

Upvotes: 1

Related Questions