Html – How can I resolve the problem of screen shaking?

The reason this is happening is to do with the margin: -200px you set when the image is hovered. To better explain what is happening I will walk you through the way css sees things. When you first start, the margin is 0, then whenever you hover the image, the margin transitions to -200px. So let’s say that you now move your mouse over the text to act as a guide when reading. Since the image is not hovered anymore it will "move down" back to where it originally was, right? Well, not exactly, you see when the image moves, the cursor will come into contact with the image again. This will make the image move back up to reveal the text, however, it only gets so far because the cursor is no longer on the image, this repeated process creates that shaky effect that you see.

Now that we understand why this happens, let’s see how we can fix it. With this recreation I will be assuming what you want out of this card because you never stated what the card was meant to do. Having said that, I assume the card is meant to display an image of a pizza, and then slide upwards to reveal a description below it when hovered. Here is the html of that I will be using.

<div id="mask">
  <div id="content">
    <img src="https://imgmedia.lbb.in/media/2020/12/5fe323e5282cde4610e3face_1608721381076.jpg" id="preview">
    <p id="desciption">This is a yummy pizza.</p>
  </div>
</div>

Now for the css, we know we can’t use the image hover to move the image as it will move and therefore cause problems, so we need to pick an element that will always stay still, and we don’t need to look further than the #mask element in the html above. So, what I did is I set the #mask element to tell me when a hover has occurred and simply translated the Y of the #content element. You can even adjust how much the image slides. Below is the code and preview.

#mask { 
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 1px solid black;
  border-radius: 15px;
}

#content {
  width: 200px;
  overflow: hidden;
  text-align: center;
  transition: transform .3s;
}

#mask:hover #content {
  transform: translateY(-65px);
}

#preview {
  background-position: center;
  height: 200px;
  transition: opacity .3s
}

#mask:hover #preview {
  opacity: 0.5;
}

<div id="mask">
  <div id="content">
    <img src="https://imgmedia.lbb.in/media/2020/12/5fe323e5282cde4610e3face_1608721381076.jpg" id="preview">
    <p>This is a yummy pizza.</p>
  </div>
</div>

Hope this helps.