Jump to content

Preload hover code works but brings in multiple copies upon hover

Recommended Posts

Posted (edited)

Hi,

Sorry had to delete last post, needed to word it better. I've been scouting all day and found a solution that is almost there. I had issues with my hover custom button flashing before changing which was jarring design wise. I fixed the flashing issue with preload code that works, but now the hover tiles and repeats itself.

This code below preloads the button image so it doesn't flash when changing to the image. but it repeats the hover image multiple times.

before hover:
image.thumb.png.d7e22d1c2d1ce1f4134f4263611c9935.png

When you hover on button:

image.thumb.png.32a8df309e47ff36284c9811a2499a29.png

Can you see the issue with the code to fix this issue?

/* Default styles for the centered div */
div#block-yui_3_17_2_1_1701422267607_2792 {
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: auto; /* Center horizontally */
    position: relative; /* Use relative positioning */
    top: 50%;
    transform: translateY(-50%);
}

/* Media query for window width of 1200px */
@media (min-width: 1200px) {
    div#block-yui_3_17_2_1_1701422267607_2792 {
        width: 280px;
    }
}

/* Preload hover effect */
div#block-yui_3_17_2_1_1701422267607_2792::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://images.squarespace-cdn.com/content/64d0a4ef828d1802cb65112a/4c70cf50-9227-4584-8ac2-3504045de812/BUT_viewshowreel_ON.png);
    background-size: contain; /* Ensure the image fits within the container without distortion */
    background-position: center; /* Center the image */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

/* Apply hover effect */
div#block-yui_3_17_2_1_1701422267607_2792:hover::before {
    opacity: 1;
}

Last piece of the puzzle for the website any suggestions are appreciated, cheers.
 

Edited by MAC1
Link to comment
  • MAC1 changed the title to Preload hover code works but brings in multiple copies upon hover
  • 4 weeks later...
  • Replies 1
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  On 5/5/2024 at 7:25 PM, colin.irwin said:
  Quote

Colin.irwin wrote: I’m reading your post on an iPad so can’t really test the code but it looks to me like the rollover image is tiling. It’s a background image so it will tile to fill its container, which  I believe is 250px high (based on default styles at the top). Try changing the height to the actual height of the image so that the container exactly fits the image. 

Hi Colin @colin.irwin , thank you i've tried your suggestions and it does look alot better. 250px x 61 px is the the size.
although it still shows 1px of the tiling.
I've tried increments of the px like 250.1 , 250.2 or 61.2 , 60.9 and i cant get rid of the slight tile that remains.
the button image is wall to wall covered so no transparency exists at the edges also.

When i do a straight hover (without preloading) i dont have the issue, its when i preload, this tiling effect happens, if that info helps.


Cheers.

Any idea how to stop the tiling or mask it better?
new result, better but with a slight tile regardless of px inputs.

image.png.7a14c8de6111fd4d74028f5cf46a5a53.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.