Triple8 Posted August 25, 2020 Share Posted August 25, 2020 Site URL: https://www.triple8dancecompany.com/company Hi, I'm trying to alter Squarespace's default settings for a hover caption overlay using Custom CSS. I want to change the transition time so that the image caption fades in and out instead of appearing immediately. This is my current code: .image-caption { left: 50%; position: absolute; top: 55%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 17px !important; font-weight: semibold !important; color: #ea4e4c !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important; overflow:hidden; } .image-caption-wrapper { top: 0 !important; padding-top: 93% !important; background: #000000 !important; opacity: 1 !important; text-align: center; pointer-events: none; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; /* future proofing */ -khtml-border-radius: 50%; /* for old Konqueror browsers */ } I'm guessing I have to add a line like "transition: 0.3s ease-in-out;" but I'm not sure where. Any help would be appreciated -- thanks! Link to comment
jpeter Posted August 25, 2020 Share Posted August 25, 2020 @Triple8 Get rid of opacity: 1 !important; in the .image-caption-wrapper CSS ruleset and then increase the transition speed from 0.1s to something like 0.5s Triple8 1 Link to comment
Triple8 Posted August 25, 2020 Author Share Posted August 25, 2020 @jpeter That worked! Thank you so much 🙂 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