Guest Posted September 17, 2021 Posted September 17, 2021 Site URL: https://collie-chicory-w59b.squarespace.com/ Password: equip I am attempting to add a rotation to images on my site - This works using section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(even) figure.animation-loaded img { transform: rotate(8deg); } section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(odd) figure.animation-loaded img { transform: rotate(-8deg); } I had to add .animation-loaded to the figure or else the image doesn't show at all (see below). However there is a frustrating issue where if the image in question is visible on the page at load (e.g. scroll part way down and then refresh) then the image doesn't show. (In the screenshot below the page was scrolled enough that the "Before School Care" section was in the viewport, the "After School Care" section was not in the viewport at page load). I I don't have the animation enabled on the section, or if I don't have the transform CSS then the images show consistently. What can I do to fix this?
HoaLT Posted September 22, 2021 Posted September 22, 2021 On 9/17/2021 at 10:37 PM, Hailwood said: Site URL: https://collie-chicory-w59b.squarespace.com/ Password: equip I am attempting to add a rotation to images on my site - This works using section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(even) figure.animation-loaded img { transform: rotate(8deg); } section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(odd) figure.animation-loaded img { transform: rotate(-8deg); } I had to add .animation-loaded to the figure or else the image doesn't show at all (see below). However there is a frustrating issue where if the image in question is visible on the page at load (e.g. scroll part way down and then refresh) then the image doesn't show. (In the screenshot below the page was scrolled enough that the "Before School Care" section was in the viewport, the "After School Care" section was not in the viewport at page load). I I don't have the animation enabled on the section, or if I don't have the transform CSS then the images show consistently. What can I do to fix this? Could you remove the selector .figure.animation-loaded img before we can check for the issue? Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) 📑 Squarespace embed PDF popup (affiliate link)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.