jec

Thank you for your reply Lesum! The extension works great to find the block id's and now I understand I have to target the image-block wrapper inside it and use my selectors on those. Your a life saver :)

Hey everyone, I am trying to do some CSS based animations such as fade in and fade out. I have the base plan that has no code injection so I am sticking to CSS. I want an image to start off as invisible/hidden and then with an on-click/on-hover fade the image in. I found this code that seems to work with basic CSS and HTML: <classname> { opacity: 0%; } <classname>:hover { opacity: 100% !important; transition: opacity 1s !important; } But since I have no control over the class names or id names square space generates I saw something on the forum on targeting a specific image using the alt tag such as this: [alt="ketchup-splash"] { opacity: 0%; } [alt="ketchup-splash"]:hover { opacity: 100% !important; transition: opacity 1s !important; } The first block works and I can see my image being invisible but the :hover does not seem to work. Just for the sake of testing I tried the same rules with a generic class name such as this and it gave the desired result except it did so on all images, I really only want this rule to apply to one specific image: .fluidImageOverlay{ opacity: 0%; } .fluidImageOverlay:hover{ opacity: 100% !important; transition: opacity 1s !important; } How can I get this to work on just one specific image? Is there another form of animation that maybe just targets the visibility tag that could also be an option? Thank you kindly for your time :)