Hover effects for Grid Gallery Block in 7.0

Site URL: https://www.saylinds.com

Hey folks, hoping you can help me out with coding a hover effect like this. I'm currently using Image Blocks on my Home + Work pages but ideally I'd like to use a Grid Gallery Block with a hover overlay that displays title, description, and opacity. I'm still in version 7.0 and I haven't found a code recent enough that works.

Thanks in advance!

You have not add the Grid gallery block yet right?

If you need simpler effect, you can use this code with Gallery Grid.

@bangank36 Correct, I haven't added the Grid Gallery Block to my site yet.

@tuanphan This doesn't seem to be working for me - is it because I'm using 7.0?

@tuanphan @bangank36 I added a test page here with a Grid Gallery Block if that's helpful!

4 hours ago, saylinds said:

@tuanphan @bangank36 I added a test page here with a Grid Gallery Block if that's helpful!

There are 2 effects on this demo, which one you like

https://beyondspace7-1.squarespace.com/?password=1234

@bangank36 I prefer the Sliding Caption option

@saylinds Your site is 7.0 with Gallery Block. Above code for SS 7.1. with Gallery Section.

Can you add some demo captions? We can code effect easier.

@tuanphan Done!

@tuanphan @bangank36 Hi I just wanted to check in to make sure you all saw that I updated the captions here! Thanks again for your help!

10 hours ago, saylinds said:

@tuanphan @bangank36 Hi I just wanted to check in to make sure you all saw that I updated the captions here! Thanks again for your help!

I don't see caption?

12 hours ago, tuanphan said:

I don't see caption?

@tuanphan Sorry I didn't realize you needed them to be displayed! Titles are now visible but the Grid Gallery Block won't allow me to display captions as well as the title. Does that help?

@tuanphan Did I add the caption correctly? Is there anything else you need? Appreciate your help!

On 12/2/2020 at 2:54 AM, saylinds said:

@tuanphan Did I add the caption correctly? Is there anything else you need? Appreciate your help!

Add to Home > Design > Custom CSS

/* Gallery hover */
body#collection-5fb43137d46bfe51eacdc245 {
.slide:hover .image-slide-title {
    opacity: 1;
}
.slide:hover a:after {
    opacity: 1;
}
.slide a:after {
    content: "";
    background: rgba(0,0,0,0.5);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    opacity: 0;
}
.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: all 0.5s;
    color: white;
z-index: 10000;
}
.slide a:after {
    content: "";
    background: rgba(0,0,0,0.5);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    opacity: 0;
}
.slide:hover a:after {
    opacity: 1;
}
.slide:hover .image-slide-title {
    opacity: 1;
}
}

17 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Gallery hover */
body#collection-5fb43137d46bfe51eacdc245 {
.slide:hover .image-slide-title {
    opacity: 1;
}
.slide:hover a:after {
    opacity: 1;
}
.slide a:after {
    content: "";
    background: rgba(0,0,0,0.5);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    opacity: 0;
}
.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: all 0.5s;
    color: white;
z-index: 10000;
}
.slide a:after {
    content: "";
    background: rgba(0,0,0,0.5);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    opacity: 0;
}
.slide:hover a:after {
    opacity: 1;
}
.slide:hover .image-slide-title {
    opacity: 1;
}
}

 

Thank you so much!

I am also looking to do this with my site staygoldencreative.com on the home page. I do not see a place to add captions, but have added a title to the first image - ThirdLove. 

Any assistance is greatly appreciated! I am using 7.0 brine template.

15 hours ago, magen said:

I am also looking to do this with my site staygoldencreative.com on the home page. I do not see a place to add captions, but have added a title to the first image - ThirdLove. 

Any assistance is greatly appreciated! I am using 7.0 brine template.

It looks like you solved?

Hi @tuanphan! I'm trying to add the hover text reveal to my site's gallery blocks (maliahee.design), but nothing seems to be working. I tried adding the above code to Custom CSS, but nothing's changing. I would greatly appreciate it if you could help me out! Thanks so much!

7 hours ago, mal1234 said:

Hi @tuanphan! I'm trying to add the hover text reveal to my site's gallery blocks (maliahee.design), but nothing seems to be working. I tried adding the above code to Custom CSS, but nothing's changing. I would greatly appreciate it if you could help me out! Thanks so much!

Hi. You want

Hover image >> Show overlay

OR

Hover image >> Show overlay + title?

@tuanphan, I want hover image >> show overlay + title

Thank you!

6 hours ago, mal1234 said:

 

@tuanphan, I want hover image >> show overlay + title

Thank you!

I don't see any title. cCan you add some demo title? We can check code easier

@tuanphan, added a few demo titles. Is there also a possibility to make words in the photo's caption appear on the hover too?

On 6/22/2021 at 11:52 PM, mal1234 said:

@tuanphan, added a few demo titles. Is there also a possibility to make words in the photo's caption appear on the hover too?

Add to Design > Custom CSS

/* overlay and title on hover */
.slide a:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
	pointer-events: none;
}
.slide a {
    position: relative;
}
.slide a {
    position: relative;
    opacity: 1 !important;
}
.slide:hover a:after {
	opacity: 1;
}
.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
	pointer-events: none;
}
.slide:hover .image-slide-title {
    opacity: 1;
}

Amazing!! Thank you so much @tuanphan! Is there a way to adjust the title font size so it's a slightly bigger?