CSS help for hover transition on portfolio page

Hi there, really dusty with coding and this seems like it should be simple but I haven't found an answer...

I am trying to create a hover on portfolio page images, where the image becomes slightly faded and the title does a quick (.5sec) fade in on a hover, center of the image. That's it.

I found the code to do it with a gallery caption (although it doesn't include the fade and the margin code seems to pull the images beneath up rather than just the title) but it doesn't work when I try it with portfolio.

.gallery-caption p{color:white!important}
.gallery-caption {text-align:center} 
.gallery-caption {font-size:2rem!important} 
.gallery-caption {margin-top: -20%} 
.gallery-caption {opacity:0!important; transition-duration:0.5s}
.gallery-grid-item:hover .gallery-caption {opacity:1!important; transition-duration:0.5s}

Thanks so much 

41 minutes ago, MissA9 said:

Hi there, really dusty with coding and this seems like it should be simple but I haven't found an answer...

I am trying to create a hover on portfolio page images, where the image becomes slightly faded and the title does a quick (.5sec) fade in on a hover, center of the image. That's it.

I found the code to do it with a gallery caption (although it doesn't include the fade and the margin code seems to pull the images beneath up rather than just the title) but it doesn't work when I try it with portfolio.

.gallery-caption p{color:white!important}
.gallery-caption {text-align:center} 
.gallery-caption {font-size:2rem!important} 
.gallery-caption {margin-top: -20%} 
.gallery-caption {opacity:0!important; transition-duration:0.5s}
.gallery-grid-item:hover .gallery-caption {opacity:1!important; transition-duration:0.5s}

Thanks so much 

Let's share your site url so we can give suggestion

I did similar effect on gallery section

https://beyondspace7-1.squarespace.com/?password=1234

https://gardenia-mandolin-besh.squarespace.com/config/pages/5fb82bc32ad3d329581d7a49

password - 1234

I did see your link but when I pasted that nothing happened.

1 minute ago, MissA9 said:

https://gardenia-mandolin-besh.squarespace.com/config/pages/5fb82bc32ad3d329581d7a49

 

password - 1234

 

I did see your link but when I pasted that nothing happened.

Your site is private

5 minutes ago, MissA9 said:

https://gardenia-mandolin-besh.squarespace.com/config/pages/5fb82bc32ad3d329581d7a49

 

password - 1234

 

I did see your link but when I pasted that nothing happened.

Let's enable the password

let me know if it works now

12 minutes ago, MissA9 said:

let me know if it works now

password 1234 not correct

Can you try it again, it wouldn't work in safari but worked in chrome for me.

The page that I am trying to figure out is under the heading "work"

50 minutes ago, MissA9 said:

it wouldn't work in safari but worked in chrome for me

Doesn't work for me in Chrome.

1 hour ago, MissA9 said:

Can you try it again, it wouldn't work in safari but worked in chrome for me.

The page that I am trying to figure out is under the heading "work"

.tweak-portfolio-grid-basic-image-aspect-ratio-34-three-four-vertical .portfolio-grid-basic .grid-item {
  position: relative;
}
.tweak-portfolio-grid-basic-image-aspect-ratio-34-three-four-vertical .portfolio-grid-basic .grid-item:hover .portfolio-text  {
  opacity: 1;
}
.portfolio-grid-basic .grid-item .portfolio-text  {
  position: absolute;
  width: 100%;
  z-index: 9999;
  opacity: 0;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.5s opacity;
  font-weight: bold;
}

This may help

it worked - thank you!