Archived topic
Elements with Hover are moving
3 replies · Started by Kevin on November 29, 2020
I tried to put a :hover code on the .inside-article and .widget, it worked, but even without transform css and scale css, only with border css, when I move the mouse over the images, they move very little, almost imperceptibly, but that irritates me , I don't want the widget or archive to move when hovering mouse, I just want it to have red embroidery. Do you know why this happens? Website dai.skdesu.com
Hi,
CSS border property adds to the width of the element, and since the .inside-article default state doesn't have border, it doesn't have the extra width.
However, we can do a workaround where we add the extra width on the default state so there's no layout shift caused by the small width change.
Try this CSS:
.generate-columns .inside-article{
border: 1px solid rgba(0,0,0,0);
}We're basically adding an "invisible" border to add in the width.
Thanks, I thought it might be that, but I just put the border on .inside-article {without .generate-columns, so it went wrong.
Now all makes sense. I didn't think it could have been that, because the border without hover had worked. I thought it could be something related to flexbox, so I asked here on the forum. Thank you.
No problem. Glad to be of any help. :)
