MAC1 Posted May 4 Share Posted May 4 (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: When you hover on button: 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 May 4 by MAC1 Link to comment
MAC1 Posted May 27 Author Share Posted May 27 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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment