Alright, so, tonight's spotlight pet got me thinking. One of my own pets is meant to have a super-interactive profile, effectively a choose-your-own story sort of thing. Fun stuff.

I wanted to make it so that:

1. the displayed overlay image would change at a certain page of the story
2. the possibility of fading out or downright removing features on the pet profile (friends, tc, etc) on specific pages. The Like heart is a particular example, and I'd love to rig it up to turn black of its own accord at a specific part.

I'm sure it's possible, because I've seen it on other pet profiles, but how is it done? I hope it's not too weird or too complicated a question to ask, but it'd be absolutely perfect for this pet!

okay i think this is possible!! idk if this is the best way, but it's one way you can go about it. to change the overlay and heart at certain points in your story, you don't actually touch the original elements itself, but you place whatever you want on top to cover them up via absolute positioning.

essentially you'll be making divs within the certain parts of the story, where you want the overlay/heart to change. the rest is just absolute positioning those divs exactly above the overlay/hearts.

so say your slides are #story1, #story2, #story3, #story4.

say you want the overlay to change at #story3, nest a div class within it called .overlay_change, and the slides thereafter (so , , etc for however long you want it to stay there). your HTML would look something like

text here etc

text here etc

and your CSS would look something like: .overlay_change {position: absolute; margin-left: whateverpx; margin-right: whateverpx;} , , , {display: none; position: absolute; margin-left: whateverpx; margin-right: whateverpx;} :target, :target, :target, :target {display: block;}

but if you wanted to make the heart turn black on , then you'd in a div class called .heart (again for however many slides after this you'd like it to be black) so instead of the above html part for , it'd look like this

text here etc

your css for the heart would be something like .heart {position: absolute; margin-left: whateverpx; margin-right: whateverpx; pointer-events: none;}

1. for the overlay to change, it'd probably be best to have a non-transparent overlay or a solid color background (though pattern works too, you'll just have to position that as well)
2. for the heart, if you want the link to remain clickable then add in pointer-events: none; to the css

Ah, I see. That's really interesting-- I'll have to look into that, it sounds like it could be really doable with the use of floating black boxes and such to achieve the effect I want. Thanks a ton!