CODEWITHSUNDEEP
csscss-transitions
Jonhz
Jonhz

Reputation: 125

Image "shaking" on CSS div transition

I have a DIV with this CSS on hover:

.card:hover {
  box-shadow: 5px 5px 20px #c4c4c4;
  margin-top: -5px;
  margin-left: -5px;
}

And inside this div, I have an image with this CSS:

.card .avatar {
  border-radius: 100px;
  margin-top: -30px;
  margin-left: 10px;
}

The problem is that the image seems to be "shaking" a bit when the transition occurs.

Here´s the fiddle: https://jsfiddle.net/zudvv4cv/2/

Upvotes: 1

Views: 1926

Answers (2)

Sujith Kumar KS
Sujith Kumar KS

Reputation: 1043

Use the transform property instead of margin

.card:hover {
  box-shadow: 5px 5px 20px #c4c4c4;
  transform:translate(-5px, -5px);
}

Make sure you have used all proper prefixes

.card:hover {
  box-shadow: 5px 5px 20px #c4c4c4;
  -webkit-transform:translate(-5px, -5px);
          transform:translate(-5px, -5px);
}

Sample https://jsfiddle.net/zudvv4cv/4/

Upvotes: 2

cyr_x
cyr_x

Reputation: 14257

Just use transform: translate(x,y) to do the transition, its ignoring the position of sourrounding elements.

transform: translate(-5px, -5px);

Upvotes: 1

Related Questions