Hi
how can I add a fade effect while hover on image?
for example a pic preview from folder list. which CSS class and where should it be placed?
Thanks
RC
X3Photo Gallery Forums
X3 Photo Gallery Support Forums
Fade image on Hover8 posts
Re: Fade image on Hover
Go to settings -> custom -> Custom CSS, add a new myfade class for folders:
Then, go to the page with the page->folders settings where you want to apply it, add myfade class:
Just for reference, I notice you have a lot of custom requests. Just keep in mind there are many technical and logical reasons why some things are done as they are, or do not exist as options. So if you run into issues with custom features, they are not always logically solvable.
Code
.myfade.folders a.item-link:hover img {
opacity: 1;
}
.myfade.folders a.item-link img {
opacity: .7;
}Then, go to the page with the page->folders settings where you want to apply it, add myfade class:
Just for reference, I notice you have a lot of custom requests. Just keep in mind there are many technical and logical reasons why some things are done as they are, or do not exist as options. So if you run into issues with custom features, they are not always logically solvable.
Re: Fade image on Hover
Hi Karl
I've notice when using this fade code, the thumbs change slightly position.
I sent you the link in PM so you can check it
Thanks
RC
I've notice when using this fade code, the thumbs change slightly position.
I sent you the link in PM so you can check it
Thanks
RC
Re: Fade image on Hover
Custom stuff, custom problems ... I notified you about this earlier. Some browsers (chrome at least) offset decimal sizes of elements when opacity goes from below 1 to 1. Sorry, this is not Imagevue X3 doing anything. There may be hacks to workaround this, but sorry I don't have time to look into this right now. In my opinion, you now have all your images by default at 0.8 opacity, and only show 1 on hover ... this is not good for displaying your images ... It means that a visitor is generally looking at your previews when they are semi-transparent.correiax wrote:I've notice when using this fade code, the thumbs change slightly position.
Re: Fade image on Hover
I can also decrease the opacity by editing the actual thumbs and upload them as 100%. That would make the same effect.
with the extra of not having any process from browser. thanks for the
as for the hover fade, I understand this can be related to external factors from browser, I tested safari and although it still happens is not so evident as Chrome.
I think this fade effect can be also accomplished by adding "hover" in CSS classes and then changing the icon (magnifier) with a fade.gif (with transparency)?
* the glitch problem I wrote above doesn't happen when hover is used.
Thanks for your feedback on this
Regards
RC
with the extra of not having any process from browser. thanks for the
as for the hover fade, I understand this can be related to external factors from browser, I tested safari and although it still happens is not so evident as Chrome.
I think this fade effect can be also accomplished by adding "hover" in CSS classes and then changing the icon (magnifier) with a fade.gif (with transparency)?
* the glitch problem I wrote above doesn't happen when hover is used.
Thanks for your feedback on this
Regards
RC
Re: Fade image on Hover
We will add more effects to choose from later, perhaps including a fade-like effect. All effects will be created by CSS.
