2

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 this by setting:

-webkit-transition-property: height,width;

But to no avail. Also, I'm trying to understand how the author of this code (I got some of the code from a CSS blog) achieves this. I understand how on hover the image changes its width, but I'm not sure why the author is setting negative top and left values. I have been trying to edit the width, height, top, and left to get the desired size on hover, but it seems to become skewed - probably because I don't understand what the negative top and left values are doing. Can anyone shine some light on this? I've read some articles on negative margins, but I don't understand what's being done here.

Here's the code:

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
.thumbnail{
  width: 100px;
  height: 100px;
}
.thumbnail:hover {
    position:relative;
    top:-50px;
    left:-35px;
    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;
}
Fahim
  • 3,466
  • 1
  • 12
  • 18
natem1270
  • 207
  • 1
  • 6
  • 18

3 Answers3

6

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);
}
Community
  • 1
  • 1
shaochuancs
  • 15,342
  • 3
  • 54
  • 62
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/

Jorden
  • 153
  • 1
  • 3
  • 16
  • Thanks, any explanation on the negative top and left? – natem1270 Apr 08 '17 at 00:02
  • I edited my code cause you probably had position relative there for a reason. I also got rid of the top and left so that it remains where it was how you left it. – Jorden Apr 08 '17 at 00:08
  • Not seeing your changes – natem1270 Apr 08 '17 at 00:29
  • You won't see any changes. All I did was move the position relative to the .thumbnail class and got rid of the left and right so that it remains in it's inherit position. https://jsfiddle.net/xakhLafd/5/ – Jorden Apr 08 '17 at 00:31
0

If you want something simple, this is code I'm working on atm:

.box img {
    margin: 1rem auto;
    border: 2px solid white;
    cursor: pointer;
    transition: all .5s ease;
}
 
.box img:hover {
    border-radius: 10px;
    transform: scale(1.5);
}
ahuemmer
  • 1,653
  • 9
  • 22
  • 29
Brandon
  • 1