Last element on each row pushing next row first element far to the right on hover-CodePudding

I add :hover with margin-top: -5px to div in *ngFor list, it works fine, but when I hover on the last div of every row, that make the first div on the next row to push down other div while that first div move to the very right under the hovered div.

All div has the same hieght, how do I fix it so that the last div hover on a row does not affect div on the other row?

Here is my sample code:

.divcard {
  width: 24%;
  margin-left: 0.8%;
  height: 420px;
  float: left;
  background-color: rgb(246, 246, 246);
  transition: ease 0.5s;
}

.divcard:hover {
  margin-top: -5px;
}

<div *ngFor="let del of item">
  <div class="divcard">
    <img class="cover" [src]="del.myimg" />
  </div>
</div>

CodePudding user response：

margin creates space, you can use transform: translateY(-5px) instead.

Edit: the browser renders transforms without affecting layout