THUMBNAIL HOVER TRANSITION QUESTION

Paris

Hey DGrinners
I am doing a revamp on my site and this is what I would like to do with your help.
My menu block consists of individual headings and when you click on a heading you go to a master page with gallery thumbnails.
The thumbnails are Black and White and when you hover they fade.
I am wondering if there is a way to change the fade so when you hove the B&W changes to colour.
You can see what I am talking about here https://www.richardparisphotography.ca/PROJECTS

Jtring

I think you can handle it the same general way that your site now changes opacity when someone hovers on an image. Put up full-color images, then insert this CSS in the places where you have the custom code to change the opacity. (From here, I can't tell where that is.) Adjust the transition time (2s) to taste. You may or may not want to change or remove the CSS dealing with opacity.

li .sm-tile:hover {
    -webkit-filter: saturate(100%);
    filter: saturate(100%);
}
li .sm-tile {
    -webkit-filter: saturate(0%);
    -webkit-transition: -webkit-filter 2s;
    filter: saturate(0%);
    transition: filter 2s;
}

By the way, fascinating (if odd) images.

Paris

Thx Jim... odd is what makes life interesting.
A few things:
1- Is it possible to only have the B&W to Colour effect happen to the page with the red&white title blocks - not the gallery multi thumbs page?
2- When I desaturate the red title block also goes grey... is there any way to isolate the red block. I assume there is a command that would protect the red, however, that would probably effect the colour image desaturation.
If this can't happen I will see what it looks like if I desaturate the B&W which will make the red block grey then go red on the hover.
Thoughts?

Jtring

@Paris said:
Thx Jim... odd is what makes life interesting.

Indeed.

A few things:
1- Is it possible to only have the B&W to Colour effect happen to the page with the red&white title blocks - not the gallery multi thumbs page?

I think you can arrange for the saturation effect not to apply to galleries, but still apply to the listing on the other pages (Projects, Prople, Down Mexico Way, etc.), by a somewhat indirect route. Replace li .sm-tile with the rather more lengthy .sm-page-widget li .sm-tile on the two lines where that applies. At the risk of TMI, this limits the saturation/desaturation effect to "page widgets", which are those content boxes that contain listings of folders, pages, or galleries. Since images inside galleries are not inside a page widget -- galleries operate differently -- this code won't apply there. In any case, give it try, but check it out carefully. I think this does what you mentioned. Maybe. It doesn't affect your Talk to Me page.

If that doesn't answer the mail, you make use of the fact that a CSS block on a page applies only to that page. Remove the CSS snippet from where you had it before and insert a CSS block with the (original) CSS separately on every page where you want it to apply. The downside? You have to insert a CSS block separately on every page where you want it to apply. No one-stop shopping.

2- When I desaturate the red title block also goes grey... is there any way to isolate the red block. I assume there is a command that would protect the red, however, that would probably effect the colour image desaturation.

I don't know of a way to do this. The red block is part of the jpg you uploaded so there's no way to address it separately. The filter property doesn't have the fine controls to address different colors separately.

If this can't happen I will see what it looks like if I desaturate the B&W which will make the red block grey then go red on the hover.
Thoughts?

Paris

Thank you Jim...

I decided to play around with your code and settled on B&W thumbs where the RED title blocks go grey.
The Gallery Page Thumbs then transition from Colour to B&W (no fade) and that works great.

Final tweak question: Is there a line of code I can add so the RED title blocks change to yellow (same as the menu names transition from Black to Yellow) - They go grey now because of the desat and get lost on some of the B&W's.

Jtring

The CSS filter property has one control on colors, one that "rotates" the color wheel. It's a blunt instrument. I tried something like the following on a black-and-white image with the red title block.

.sm-page-widget li .sm-tile:hover {
-webkit-filter: hue-rotate(60deg);
filter: hue-rotate(60deg);
}
.sm-page-widget li .sm-tile {
-webkit-filter: hue-rotate(0deg);
-webkit-transition: -webkit-filter 2s;
filter: hue-rotate(0deg);
transition: filter 2s;
}

Instead of a yellow, I got a murky brown. You can try it with different rotations -- replace 60deg with some other number -- and see if you like any of the possible colors. You can use negative numbers. For example, -90deg gives purple as does 270deg, but the transitions are different. The whole list of things that the filter property can do is listed here if you are really into experiments. Page down to where it says "Filter Functions".

I don't see any way to fiddle with the colors on images in a SmugMug content blocks except with the filter CSS property. I suspect there would be ways to have one image with a red block transition into another with a yellow block (and back) if you wrote a bunch of original HTML and put it in a separate HTML block, but working something like that out is more than I'm up for.

Paris

Thanks Jim... I am really happy with the results I achieved with your help.
This is just a tweak and certainly not worth a trek up the mountain.
UPDATE: I spent a few minutes playing with the colour wheel and I am perplexed that I cannot achieve a clean yellow at 60. I work with colour theory all the time when I colour grade and it doesn't make sense. I can achieve clean Magenta, Cyan, etc.rollovers at their respective degree settings and so I tried reversing the procedure using a Yellow block bg and the same issue trying to achieve Red. It's a conundrum as they say.
Anyway... as said, I am a happy camper and moving on.
I took a peak at your website...very nice.