Image Map and Fading Pics

Jim_Mount

All right, if anyone can lend me some code to solve this issue, I'll reciprocate with a like, unless I already like you, then I guess, I'll pay it forward? Anywho.

Note on my pages that I have an effect that fades the pics slightly so they look "old" on ye olde parchment background until you hover over them. The code I use for that is this, and I can't remember who I ripped that off from.

/* IMAGE STYLING */
.main-content img {filter: sepia(25%) opacity(80%); transition: all 0.3s ease-in-out;}
.main-content img:hover {filter: sepia(0%) opacity(100%); transition: all 0.3s ease-in-out;}
.main-content a img:hover {filter: sepia(0%) opacity(100%); transition: all 0.3s ease-in-out;}
.main-content img usemap:hover {filter: sepia(0%) opacity(100%); transition: all 0.3s ease-in-out;}

I think the last line was my last attempt to solve the problem I'm asking about right now and currently does nothing. That is,  my image maps behave like images, in that they pop to 100% opacity when you hover over them, except when you hover over a link within the image. And to me that just seems dumb. I want the image maps to either a) stay faded unless you hover over a link) or b) be faded until you hover over them and then become say 95% opaque, and then pop to 100% when you hover over a link. Is there any way I can make them behave?

PS: Bonus if I can get the maps on my map page to be an exception to all my image fading nonsense entirely. I can't seem to make them an exception to the rule.

cgregory

If you gave a class to you faded images then you could target those specifically and your maps would be excluded.

<img class="faded" ... In your pages hmtl

and 

.faded { filter...  In your css

i tend to cut up my image maps so i can apply actions to individual parts.

For example here is a page that contains 12 images but arranged sort of like an image map. One main background image and 11 smaller images that function based on their 3 classes. leftnavimg, bottomnavimg and anigif. In your case you could cut up your image map and cause only the linked part to grow opaque.

 

Jim_Mount

I was wondering how you did that thing. Gifs in there? Genius! Also, waaaay beyond my skill set atm. But that won't stop me from mulling it over and playing around with it. I have this idea down the line of doing an episode guide as the campaign drags on--making it look like an old 40's pulp action digest where you can flip pages to the the synopses. Again, way beyond what I can do right now and not necessary with only a few episodes, er, sessions. But again... Thanks!

I was hoping I would not have to apply html to every image I wanted the effect to work on just to exclude the map page maps. I was rather hoping that instead, there was something I tag to exclude just the map page. Aw well.

cgregory

Let me look once i get to my computer. I'll see if the map page images have a specific class that you can exclude. If they do we can exclude them.

Jim_Mount

You know, I just took a good hard look with my glasses on and it seems the maps on the map page are not, in in fact, faded and sepia'd by my code... which is strange because I could have sworn they were before.