studer Posted March 29 Share Posted March 29 (edited) I'm working on a new splash/welcome screen for a site that's still in development. The page has one section and within that section are three images. Each image links to a specific page. I am trying to use CSS to do a few things: Somewhat grey/fade out all images that are not being hovered on, but not on the mobile version. Fully saturate the image when the mouse is hovering over it, again not on the mobile version. Zoom in on the image by 10% when hovering. I have not yet decided if I want the image to zoom within the block, by 10%, or if I want the block itself to get 10% larger when hovering. I have identified the individual section number with the Squarespace ID Finder plugin, and the section I'm working on is section[data-section-id="660715834081535383850183"]. I need to make sure these effects are only applied to this specific section, not the whole site or any other sections/pages. Any help would be appreciated. I am new to CSS so there may be a bit of ELI5 along the way. Thanks everyone! Edited March 29 by studer clarification Link to comment
studer Posted March 30 Author Share Posted March 30 All good now. Spent a couple hours fighting chatgpt yesterday and it was able to get me a combination of css and java that got me what I need. tuanphan 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