portfolo hover effect

Hello please i need help with a portfolo site i am building 

I want to achieve this hover effect which makes the colour picture hover to black and white and the hover test that has two test styles however I can seem to achieve that

3 hours ago, Roseline said:

Hello please i need help with a portfolo site i am building 

I want to achieve this hover effect which makes the colour picture hover to black and white and the hover test that has two test styles however I can seem to achieve that

 

Can you share your website URL?

https://www.vukmirkovic.com/  for mine the reference is dannygevirtz.com

thank you

37 minutes ago, Roseline said:

https://www.vukmirkovic.com/  for mine the reference is dannygevirtz.com

thank you

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.portfolio-grid-overlay.grid-wrapper .grid-item:hover .grid-image *{
    filter: grayscale(100%) !important;
}
.portfolio-grid-overlay.grid-wrapper .grid-item .portfolio-overlay{
    background: #000 !important;
}

Thank you so much 

The black and white is perfect

I still can't achieve the year under just like danny

And please the gif text on hover is not showing on the mobile please i need it to show

On 10/26/2023 at 10:49 PM, Roseline said:

Thank you so much 

The black and white is perfect

I still can't achieve the year under just like danny

With Year, you will need to use custom code to add, something like this

a.grid-item[href="/portfolio/project-four-l3zw3-ns9w8"] h3:after {
    content: "2022";
    display: block;
}
a.grid-item[href="/portfolio/project-three-sng7y-6mb5w"] h3:after {
    content: "2021";
    display: block;
}

with /portfolio/pro.... is each project item url