Div CSS Transition Scaling Blurry And Shakey

Question

No matter what I try, and I cannot get a nice DIV transition that I am expanding.

https://jsfiddle.net/ugoqrap6/7/

transform: translate3d(0,0,0);
backface-visibility: hidden;

I tried many different sentences, but none of them seem to matter.

Answer 1

you can use transform: scale(1.2);

I made a simple example here, since there are many other things in your code, this should make it easier for future readers.

As others have noted, pay attention to image stretching.

ul {
    padding: 0;
    margin: 50px 20px;
    list-style: none;
}
ul li {
    margin: 5px;
    display: inline-block;
}
ul li a {
    padding: 5px;
    display: inline-block;
}
ul li a img {
    width: 125px;
    height: 125px;
    display: block;
}
ul li a:hover img {
    transform: scale(1.2);
    transition: transform 0.5s ease;
}

<ul>
  <li><a href="#"><img src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"></a></li>
  <li><a href="#"><img src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"></a></li>
  <li><a href="#"><img src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"></a></li>
</ul>

Run codeHide result

Answer 2

Here's the jquery parameter, it disappears briefly, so you avoid stretching animations.

$('.thumb').mouseenter(function() {
  $(this).fadeTo(200, 0, function() {
    $(this).css("transform", "scale(1.2)");
    $(this).fadeTo(500, 1);
  });
})

$('.thumb').mouseleave(function() {
  $(this).fadeTo(200, 0, function() {
    $(this).css("transform", "scale(1)");
    $(this).fadeTo(500, 1);
  });
})

ul {
  padding: 0;
  margin: 50px 20px;
  list-style: none;
}
ul li {
  margin: 5px;
  display: inline-block;
}
ul li a {
  padding: 5px;
  display: inline-block;
}
ul li a img {
  width: 125px;
  height: 125px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="#">
      <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg">
    </a>
  </li>
</ul>

Run codeHide result