FooGallery uses attachments from within the WordPress media manager, so you can resize them from the media library.
Also, you can add custom CSS to the gallery via the Custom CSS metabox below the gallery settings, when editing a gallery
I was looking for resizing with the cursor rather than manually typing in sizes but I realise this is probably not possible.
I have added a custom css to change images in the gallery to be greyscale until hovered over.
But the trouble is all images turn to colour when an image is hovered over rather than an individual image. I am look for the correct custom css for this.
Im using this custom css. Changes to colour only when clicked on:
#foogallery-gallery-147
{
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
#foogallery-gallery-147: hover
{
filter: none;
-webkit-filter: none;
}
I just added the following CSS to one of my galleries and it worked as expected:
#foogallery-gallery-147 a:hover img {
filter: none;
-webkit-filter: none;
opacity: 1 !important;
}
#foogallery-gallery-147 img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
now why didn’t i think of just adding ‘img’.
thank you so much. my brain is fried from all this learning about css.
Hello problem I had was not seen in black and white on Firefox. We solve looking for the file:
/ public_html / wp-content / plugins / foogallery / extensions / default-templates / CSS/gallery-default.css
and search
.foogallery-default.hover-effect-color img
and place the following
filter: grayscale (100%); / * Firefox * /
It worked for me so.
