CODEWITHSUNDEEP
css
Black
Black

Reputation: 3

How to fix shaking on animations

Hello guys i have problem with this project. There is shaking in picture while scale animation is happening. backface-visibility did not solved problem can any body help please?

Here is in codepen. sorry for bad english. https://codepen.io/blackbicoder/pen/QXRaNB

<div class="portfolio__item">
  <div class="portfolio__picture">
    <img src="https://images.pexels.com/photos/2617751/pexels-photo-2617751.jpeg?cs=srgb&dl=beverage-business-coffee-2617751.jpg&fm=jpg" alt="Portfolio image 1" class="portfolio__img">
    <div class="portfolio__overlay">
    </div>
  </div>
</div>

.portfolio__item {
  width: 30rem;
  height: auto;
  overflow: hidden;
  position: relative;
  border-radius: 2rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.portfolio__item:hover .portfolio__overlay,
.portfolio__item:focus .portfolio__overlay {
  opacity: 1;
}

.portfolio__item:hover .portfolio__img,
.portfolio__item:focus .portfolio__img {
  transform: scale(1.05);
  filter: blur(2px);
}
.portfolio__picture {
  overflow: hidden;
  border-radius: 2rem;
}
.portfolio__img {
  width: 100%;
  display: block;
  transition: transform 0.3s, filter 0.3s;
  backface-visibility: hidden;
}
.portfolio__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: all 0.3s;
}

Upvotes: 0

Views: 1657

Answers (1)

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

Simply use the following line right after backface-visibility: hidden; 

-webkit-filter: blur(0);

This would work almost for the requirement. Because this is transition running while in another transition.

.portfolio__item {
  width: 30rem;
  height: auto;
  overflow: hidden;
  position: relative;
  border-radius: 2rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.portfolio__item:hover .portfolio__overlay,
.portfolio__item:focus .portfolio__overlay {
  opacity: 1;
}

.portfolio__item:hover .portfolio__img,
.portfolio__item:focus .portfolio__img {
  transform: scale(1.05);
  filter: blur(2px);
}

.portfolio__picture {
  overflow: hidden;
  border-radius: 2rem;
}

.portfolio__img {
  width: 100%;
  display: block;
  transition: transform 0.3s, filter 0.3s;
  backface-visibility: hidden;
  -webkit-filter: blur(0);
}

.portfolio__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: all 0.3s;
}
<div class="portfolio__item">
  <div class="portfolio__picture">
    <img src="https://images.pexels.com/photos/2617751/pexels-photo-2617751.jpeg?cs=srgb&dl=beverage-business-coffee-2617751.jpg&fm=jpg" alt="Portfolio image 1" class="portfolio__img">
    <div class="portfolio__overlay">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions