Thumbnail Grid Customization: Overlay and caption on hover

Site URL: https://maithnguyen.com/

I want to customize my thumbnail in portfolio grid. Right now, when hover, the thumbnails will turn into black screen with text on top. I want to change it to, before hover, the thumbnails are Grayscale (BnW), then when hover, they will turn to the original image with text on top.

Here is my url: https://maithnguyen.com/

Please help me and thank you so much!

Add to Design > Custom CSS

div#gridThumbs img {
    filter: grayscale(1);
}
.portfolio-overlay {
    background-color: transparent !important;
}
div#gridThumbs .grid-item:hover img {
    filter: grayscale(0);
}

42 minutes ago, tuanphan said:

Add to Design > Custom CSS

div#gridThumbs img {
    filter: grayscale(1);
}
.portfolio-overlay {
    background-color: transparent !important;
}
div#gridThumbs .grid-item:hover img {
    filter: grayscale(0);
}

 

How about if I want the image is overlayed by a color (#000000) at the first time, with opacity 50%, text on top, and after hover, I want it to turn into the original image overlayed by color (#F123A4), text is disappeared before and after hover? I dont want text to appear

You mean

Initial

• Grayscale image
• #000 overlay, 50% opacity
• Show text

Hover

• Original image
• #F123A4 overlay, 100% opacity
• Hide text

Is this right?

5 minutes ago, tuanphan said:

You mean

Initial

• Grayscale image
• #000 overlay, 50% opacity
• Show text

Hover

• Original image
• #F123A4 overlay, 100% opacity
• Hide text

Is this right?

Initial

• Grayscale image
• #000 overlay, 50% opacity
• Hide text

Hover

• Original image
• #F123A4 overlay, 50% opacity
• Hide text

1 hour ago, tuanphan said:

Add to Design > Custom CSS

div#gridThumbs img {
    filter: grayscale(1);
}
.portfolio-overlay {
    background-color: transparent !important;
}
div#gridThumbs .grid-item:hover img {
    filter: grayscale(0);
}

 

Also, about this, how about?

*Initial:

Original Image

*Hover:

Turn into a different image (I can paste my Image link sources later)

Option 1. Add to Design > Custom CSS

div#gridThumbs img {
    filter: grayscale(1);
}
div#gridThumbs .portfolio-overlay {
    background-color: rgba(0,0,0,0.5) !important;
    opacity: 1 !important;
}
div#gridThumbs .grid-item:hover img {
    filter: grayscale(0);
}
div#gridThumbs .grid-item:hover .portfolio-overlay {
    background-color: rgba(241, 35, 164, 0.5) !important;
}
div#gridThumbs h3 {
    visibility: hidden;
}

Option 2

a.grid-item .portfolio-overlay {
    opacity: 0 !important;
}
a.grid-item[href="/maifolio/colab-dry-shampoo"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2021/12/23/13/25/flower-6889331__480.jpg);
}
a.grid-item[href="/maifolio/bubly-watch-out"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2022/01/18/03/16/deer-6946129__340.jpg);
}