Fade-in Hover Caption Using CSS

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!

@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

@jpeter That worked! Thank you so much 🙂