Page 1 of 1

Gallery hover effect

Posted: Sat Aug 20, 2022 2:41 pm
by oakstudio
Hi there!
I would like to change the default hover affect to my own one. Can you please guide on how to do that? Should I use some 3rd party plugins for that purpose?
Thanks.
Btw, you have an awesome gallery plugin :)

Re: Gallery hover effect

Posted: Sun Aug 21, 2022 8:49 pm
by gt3themes
Hello!
Can you please share a link to the page where we can see your custom hover effect?

Re: Gallery hover effect

Posted: Tue Aug 23, 2022 8:12 pm
by gt3themes
Hello!
Got your link via PM.
Our GT3 gallery block has a class "hover-default".

1) Background:

.gt3-photo-gallery-pro--isotope_gallery .hover-default .img-wrapper::before {
background: #000;
opacity: 0;
z-index: 1;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all .3s linear;
}

The transparency is changed when you hover:

.gt3-photo-gallery-pro--isotope_gallery .hover-default .gt3pg-isotope-item .img-wrapper:hover::before {
opacity: .5;
}

2) And a "+" sign

.gt3-photo-gallery-pro--isotope_gallery .hover-default .img-wrapper::after {
background: url(https://gt3themes.com/wp-content/plugin ... 556b2f.svg) no-repeat 50%;
background-size: auto;
background-size: 14px;
z-index: 2;
opacity: 0;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all .3s linear;
}

You can also change the transparency from 0 to 1

.gt3-photo-gallery-pro--isotope_gallery .hover-default .gt3pg-isotope-item .img-wrapper:hover::after {
opacity: 1;
}

Re: Gallery hover effect

Posted: Fri Aug 26, 2022 1:15 pm
by oakstudio
Got it, thank you very much.
Have a great day!