7.1 Gallery caption hover + mobile question

Site URL: http://www.celineisogai.com

Hi!

celineisogai.com
password: wowza

I've been searching around for a solution for a hover effect on my gallery (simple:grid) but the CSS I've tried didn't work. I was hoping to have the images in greyscale when static and when hovered over become the regular colour with the caption in the middle. When I tried one of the other codes it changed the padding between the grid pictures and then pictures were touching. My second question to this would be can I have it so that in mobile they don't have the greyscale or hover effect? I just want the picture. 

Last question would be what is the code to have my pictures in 1 column on mobile? When I click on the "work" page there's 2 columns and inside the projects it's also 2 columns. 

Thank you!

@tuanphan would you know the answer to this? 🙂 

@celineisogai, add this to your custom CSS

 

@media(max-width:767px) {
.gallery-grid-item img {
    filter: none;
}

.gallery-grid-wrapper {
    grid-template-columns: 1fr !important;
}     
}

Working Demo: 
https://www.loom.com/share/089c9989afa443518e4955230b037010