Mouseover effects on Gallery thumbs?


#1

Hi all, I am developing a new site that features a page of small images that will link to pages. I was planning to use the excellent Justified Gallery plugin by Ezio Tarquilio which although written for Pulse 4 did actually work with early versions on Pulse 5. However I just upgraded to latest one and that gallery broke : (

It does sort of work, but instead of referencing the gallery I specify it just uses media root folder; So it looks like this:
https://www.finelinelighting.online/test

So instead I shall use the standard Pulse Thumbs gallery and put a link in images there.
However I would really like to have a mouseover effect on the thumbs. I have written the code for it and have successfully applied it as a class to images elsewhere on site, such as here:
https://www.finelinelighting.online/hire
But how could I add that to the thumbs here:
https://www.finelinelighting.online/lighting

Grateful for any pointers or tips.
And @Tarqez, you are missed here. Your plugins were top quality. Thanks.


#2

How about adding something like the same CSS from your /hire page to the /lighting page under Custom CSS:

.imagelightbox {
-webkit-filter: blur(100%) grayscale(01%);
filter: alpha(opacity=100);
}

img.imagelightbox:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-filter: grayscale(100%);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Looks pretty good:


#3

Of couse! Perfect, thank you. I had never considered using the custom section. Opens up a lot of possibilities.
Much appreciated :slight_smile:


closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.