Help with custom CSS to match example

Hi, I am currently building my site using the Sonora template and want to achieve this rollover animation effect and linked navigation on my gallery poster images. I assume it will need custom CSS as I haven't been able to figure it out in the standard edit options.

https://mainframe.co.uk/portfolio

As you can see initially the images display and then when the cursor rolls over an image, it activates a trans black image overlay to fade up and the title, subtile and navigation buttons animate on.  The View Project  link  takes you to a "Not Linked" index page and the Quick Look link plays a video in a lightbox.

So far I have made it visually similar, on mine the View Project and Quick Look are part of my subtitle and I then highlighted the View Project and added a link to the text to a non linked index page, which works but maybe not the correct way to do it (See image attached - I don't want the underline on the link) . As yet I have no link on the Quick look text . I am not sure if this is how the example on the Mainframe website is done, I think theirs uses buttons?

Any help to match the mainframe example would be greatly appreciated.

Thanks

Hi,

What is your site url? We can help easier.

With example site: https://mainframe.co.uk/portfolio

I see they used Image Block with Image caption and some CSS to achieve this. With click link open video lightbox, I think they used a lightbox plugin.

Hi my site is

https://kangaroo-grey-8tpr.squarespace.com/config/pages

Does that work?

Thanks for all your help

On 7/2/2024 at 4:19 PM, SQUARESURFER said:

Hi my site is

https://kangaroo-grey-8tpr.squarespace.com/config/pages

Does that work?

Thanks for all your help

 

Site is private, I can't access it. You can follow this thread.

@tuanphan does this work

https://kangaroo-grey-8tpr.squarespace.com/config/pages

Password - WVstudio

@tuanphan I found some code (*see below)  so the title/info appears on the rollover and the image darkens/has a dark overlay.

So now I just need to add code to make the Title and subtitle animate in as per this ref

https://mainframe.co.uk/featured

*

.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: .5s;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color: hsla(192, 67%, 0%, 0.4);
}

On 7/5/2024 at 10:10 PM, SQUARESURFER said:

@tuanphan I found some code (*see below)  so the title/info appears on the rollover and the image darkens/has a dark overlay.

So now I just need to add code to make the Title and subtitle animate in as per this ref

https://mainframe.co.uk/featured

 

*

.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: .5s;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color: hsla(192, 67%, 0%, 0.4);
}

 

Which page are you referring to? I don't see them on main/home page

https://kangaroo-grey-8tpr.squarespace.com/?noredirect