translateX for images

  • Stefanie
    May 31, 2025 at 12:19 pm

    Hi team,

    In this Page Hero I used translateX to move the images to the left. Unfortunately, this creates a strip at the edge of the image. I wonder if there is a way to prevent this. Is there anything I can do to give the image more space on the side? Do you have any ideas?

    Thank you!

  • Alvind
    June 1, 2025 at 6:24 pm

    Hi there,

    I’m not sure if there’s a workaround for this, unless you use an image with a wide enough dimension to allow it to slide fully before being cut off.

    Alternatively, I suggest using a different effect, like zoom in/out—or for something more fancy, like the Ken Burns effect.

  • Stefanie
    June 2, 2025 at 6:47 am

    Hi there,

    thanks for your feedback!
    I specifically don’t want to use the Ken Burns effect (zoom in/out).

    unless you use an image with a wide enough dimension

    That’s exactly what I’m trying to do!

    I uploaded a 3000px wide image, but (I don’t know why) it behaves exactly like the images I have in there now (these are 1920px wide).

    Is there anything I can do to give the image more space on the side?

    Thank you!

  • Ying
    June 2, 2025 at 10:09 am

    If you are translate -15% in x direction, then you need to increase the width of the background image for 15%.

    Currently, you have this CSS. Try changing the width to 115% instead of 100%.

    .bg-fade {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    animation-name: fade-move;
    animation-duration: 33s;
    animation-iteration-count: infinite;
}
  • Stefanie
    June 2, 2025 at 12:07 pm

    Wow, that’s such a good idea, Ying!
    It works like a charm 🙂

    Thanks a bunch 🌷

  • Ying
    June 2, 2025 at 3:05 pm

    You are welcome   🙂

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