Image Enlarge On Hover

Code: https://jsfiddle.net/xakhLafd/ Hello, I'm trying to have an image enlarge on hover and use an ease transition. It works, but it seems to bug out sometimes. I tried to fix th

Solution 1:

The top:-50px; left:-35px; rule in CSS is used to keep the image's center-point unchanged after it is enlarged. Otherwise, when image is enlarged, you will feel it is moved to right-bottom side.

However, this is not a good design -- width/height change requires calculating new layout and redraw UI elements on every animation frame, which is very expensive (you can check this SO for difference between repaint and reflow). That's why you feel "it seems to bug out sometimes."

A better way is using transform. Please check the jsfiddle that fix the issue. The new CSS code is:

.thumbnail{
  width: 100px;
  height: 100px;
  display:block;
  z-index:999;
  cursor: pointer;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
.thumbnail:hover {
    transform: scale(5);
}

Solution 2:

Here is the fiddle I created that fixes the issue. I got rid of position relative and set the height to auto instead of 100px.

here is the code i did.

 <img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg"class="thumbnail"/>

 .thumbnail{
    width: 100px;
    height: auto;
    position:relative;
 }
 .thumbnail:hover {
     width:500px;
     height:auto;
     display:block;
     z-index:999;
     cursor: pointer;
     -webkit-transition-property: all;
     -webkit-transition-duration: 0.3s;
     -webkit-transition-timing-function: ease;
}

Sorry forgot to update the fiddle here is the new link.

https://jsfiddle.net/xakhLafd/1/