[Support request] Elements with Hover are moving

Home Forums Support [Support request] Elements with Hover are moving

Home Forums Support Elements with Hover are moving

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1557405
    Kevin

    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

    #1557432
    Elvin
    Staff
    Customer Support

    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.

    #1557746
    Kevin

    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.

    #1559397
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.