Jump to content

Fade-in Hover Caption Using CSS

Recommended Posts

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;

.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
  • Replies 2
  • Views 921
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.