jnicoleb Posted May 1 Share Posted May 1 Hi again, On the "Medical Dermatology" page (can only be accessed from the 2nd section on the home page), I have a simple list that I am wanting to make only the images greyscale, and then when hovering over any list item (including the button), the image transitions to full color. I would like the list.item.content to be full color from the start, and only have the image's greyscale change when hovering over any element in an individual list card. Hopefully that makes sense, thank you in advance! site: https://brannata-dermatology.squarespace.com/ password: bd Link to comment
LeauxFi Posted May 1 Share Posted May 1 (edited) Im working on this as we speak and have it working on mine, only difference is I hid my button. Try this code: //GREYSCALE MOUSEOVER ON SIMPLE LISTS .list-item-media { transition: all 1s; filter:grayscale(1); } .list-item:hover .list-item-media {transition: all 1s; filter:grayscale(0)!important; } @media only screen and(max-width:640px){ .list-item-media{ filter:grayscale(0)!important; } } the part "@media only screen" etc etc etc disables the effect for mobile devices. it wont really work on them so no point in having it try to work there. the "transition: all 1s" part is telling it how long it takes to switch from grey to color. 1s = 1 second and you can change how fast or slow you want it to go. 1.5s or .5s or 2s etc etc the "filter:grayscale(1)" part is telling it to start with everything grayscale at 100% and then below on item:hover grayscale goes to 0%. You can adjust or flip that however you want using decimals between 1 and 0 for both. Edited May 1 by LeauxFi Link to comment
jnicoleb Posted May 3 Author Share Posted May 3 @LeauxFi Thank you so much for your response as well as the explanations, this is super helpful! Your code worked great, but I am wanting to target a specific list, not all lists on the site. I have the "Squarespace ID Finder" chrome extension, which I believe should help me target the specific lists, but I am not sure how to go about using the ID's with CSS. Would you happen to know? Thank you again for your help! Link to comment
Solution LeauxFi Posted May 4 Solution Share Posted May 4 12 hours ago, jnicoleb said: @LeauxFi Thank you so much for your response as well as the explanations, this is super helpful! Your code worked great, but I am wanting to target a specific list, not all lists on the site. I have the "Squarespace ID Finder" chrome extension, which I believe should help me target the specific lists, but I am not sure how to go about using the ID's with CSS. Would you happen to know? Thank you again for your help! Sure, so when you want to target a specific section or block, use the ID Finder and put it BEFORE the code you use. Then use the { } to hold the code as usual. So in short itll look like Section/Block { entire code } In this example, I'll use a block from my own site and it would look like: //GREYSCALE MOUSEOVER ON SPECIFIC SECTION SIMPLE LIST section[data-section-id="6635cc2fb4f49d34d81efa34"] { .list-item-media { transition: all 1s; filter:grayscale(1); } .list-item:hover .list-item-media {transition: all 1s; filter:grayscale(0)!important; } @media only screen and(max-width:640px){ .list-item-media{ filter:grayscale(0)!important; } } } Let me know if this works Link to comment
jnicoleb Posted May 15 Author Share Posted May 15 So sorry for the late response, but yes that worked perfectly! Thank you so much for your help!! Link to comment
LeauxFi Posted May 15 Share Posted May 15 21 hours ago, jnicoleb said: So sorry for the late response, but yes that worked perfectly! Thank you so much for your help!! No prob! Glad it worked, I've officially gone from newbie to newbie-contributor lol. Thanks! jnicoleb 1 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