CODEWITHSUNDEEP
cssanimation
learningtech
learningtech

Reputation: 33695

Center an image while animating parent width?

I have a div acting as a view port to an image. I want the div to expand its width on mouse over and for the image inside to stay move and stay centered as well. The following code does exactly what I want:

HTML & CSS

.image {
  width: 10%;
  background: transparent center center;
  height: 200px;
  transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -o-transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -ms-transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -moz-transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -webkit-transition: width 2s cubic-bezier(.15, .88, 0, .99);
}
.image:hover {
  width: 70%;
}
<div class="image" style="background-image:url(http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg);"></div>

The only thing I don't like about it is putting the image url in the style attribute. I would prefer my HTML mark up to look like this:

HTML

<div class="image2">
  <img src="http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg" />
</div>

I tried using this CSS code to achieve the same effect:

.image2 {
  position: relative;
  width: 10%;
  height: 200px;
  overflow: hidden;
  transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -o-transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -ms-transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -moz-transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -webkit-transition: width 2s cubic-bezier(.15, .88, 0, .99);
}
.image2:hover {
  width: 70%;
}
.image2 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="image2">
  <img src="http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg" />
</div>

But the problem with this is that in Chrome on Windows 10, there's a bit of jolting in the image (at least on my computer). While the div is collapsing in width, there's brief jolt around the time the div width is equal to the img width. How do I get rid of this jolting effect? It doesn't seem to happen on Edge browser.

Is there a better way to write my CSS so that things behave exactly like my first approach?

Upvotes: 2

Views: 35

Answers (1)

Andrew Bone
Andrew Bone

Reputation: 7291

Have a look at this, I've added will-change: transform; to .image2 img meaning it will give the animation to the GPU. Does it look better for you?

Here's some info on it

.image2 {
  position: relative;
  width: 10%;
  height: 200px;
  overflow: hidden;
  transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -o-transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -ms-transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -moz-transition: width 2s cubic-bezier(.15, .88, 0, .99);
  -webkit-transition: width 2s cubic-bezier(.15, .88, 0, .99);
}
.image2:hover {
  width: 70%;
}
.image2 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
<div class="image2">
  <img src="http://www.oxfordproperties.com/corp/images/investmentCaseStudy/900NewYorkAvenue-main.jpg" />
</div>

Upvotes: 2

Related Questions