Jump to content

Thumbnail Grid Customization: Overlay and caption on hover

Recommended Posts

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!

Link to comment

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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Edited by mainguyenthanhh
Link to comment
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)

 

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.