Page 1 of 1

Fade image on Hover

Posted: 08 Mar 2016, 17:14
by correiax
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

Re: Fade image on Hover

Posted: 09 Mar 2016, 00:36
by mjau-mjau
Go to settings -> custom -> Custom CSS, add a new myfade class for folders:
Code
.myfade.folders a.item-link:hover img {
  opacity: 1;
}
.myfade.folders a.item-link img {
  opacity: .7;
}
Image

Then, go to the page with the page->folders settings where you want to apply it, add myfade class:
Image

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

Posted: 09 Mar 2016, 16:46
by correiax
Thanks Karl !

Re: Fade image on Hover

Posted: 18 Mar 2016, 23:09
by correiax
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

Re: Fade image on Hover

Posted: 19 Mar 2016, 00:44
by mjau-mjau
correiax wrote:I've notice when using this fade code, the thumbs change slightly position.
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.

Re: Fade image on Hover

Posted: 19 Mar 2016, 06:51
by correiax
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 :idea:

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

Posted: 20 Mar 2016, 01:32
by mjau-mjau
We will add more effects to choose from later, perhaps including a fade-like effect. All effects will be created by CSS.

Re: Fade image on Hover

Posted: 20 Mar 2016, 08:47
by correiax
:mrgreen: :lol:
Super!!