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:
@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
Question
Triple8 0
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 post
Top Posters For This Question
2
1
Popular Days
Aug 25
3
Top Posters For This Question
Triple8 2 posts
jpeter 1 post
Popular Days
Aug 25 2020
3 posts
Popular Posts
jpeter
@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
2 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment