Gallery hover effect

Submit issues that you have with the gallery
Post Reply
oakstudio
Posts: 2
Joined: Sat Aug 20, 2022 2:34 pm

Gallery hover effect

Post 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 :)
User avatar
gt3themes
Site Admin
Posts: 5
Joined: Tue Jul 19, 2022 4:47 pm
Location: New York

Re: Gallery hover effect

Post by gt3themes »

Hello!
Can you please share a link to the page where we can see your custom hover effect?
GT3 Themes Support Team
User avatar
gt3themes
Site Admin
Posts: 5
Joined: Tue Jul 19, 2022 4:47 pm
Location: New York

Re: Gallery hover effect

Post 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;
}
GT3 Themes Support Team
oakstudio
Posts: 2
Joined: Sat Aug 20, 2022 2:34 pm

Re: Gallery hover effect

Post by oakstudio »

Got it, thank you very much.
Have a great day!
Post Reply