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
Gallery hover effect
Re: Gallery hover effect
Hello!
Can you please share a link to the page where we can see your custom hover effect?
Can you please share a link to the page where we can see your custom hover effect?
GT3 Themes Support Team
Re: Gallery hover effect
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;
}
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
Re: Gallery hover effect
Got it, thank you very much.
Have a great day!
Have a great day!