Treehouse: Grow your CSS skills. Land your dream job.

CSS styling for “reflective” rollover property

  • # August 4, 2011 at 4:37 pm

    Hello, my first post, I did some searches and didn’t see anything on this, hopefully I can find some good leads.

    I’m designing a site that will have as it’s index/home page a very ornate handheld mirror that has fallen and all the glass has broken out into pieces.

    The links for the site will be embedded in several of the larger “glass shards” of the mirror. I was wondering if anyone knew of a way to get not just a color change rollover, but an effect that mimics light reflecting in a mirror. Sort of a “POP” of light like you see on TV shows when someone is signaling to others far away with a handheld mirror reflecting the sunlight.

    Standard rollover color changes are no problem, but anything that would look more realistic is my goal. Any ideas?


    # August 4, 2011 at 4:44 pm

    You might be able to put a radial gradient background on a :hover. Just make the gradient centered in the top-left-ish of the piece, and make it an almost-white color. Either that, or use an image and add it as a background on a :hover.

    # August 4, 2011 at 4:58 pm

    Duh to me, I didn’t even think of using an image-replacement or the gradient. It’s so simple and easy I allowed myself to overlook it.

    Thank you Cliff!

    # August 4, 2011 at 5:51 pm

    Your welcome.

    # August 4, 2011 at 9:03 pm

    I wanted to follow up on the above, I forgot to add earlier.

    Would there be a way to do a quick, timed flash, that pops and then goes back to normal regardless of whether the mouse is hovering over the link or simply passing over it?

    Does that make sense?

    # August 5, 2011 at 1:29 pm

    A event without the user doing anything? Could try a really long css animation or animated gif.

    # August 5, 2011 at 5:59 pm

    Well, not exactly, I’d like to have the reflection ‘pop’ only when the mouse rolls over it. However, I want the pop to be quick like a true reflection regardless of whether the user keeps the mouse hovered over the link or if they just pass over it quickly. So it would be a quick pop and return to normal, with maybe the text taking a slightly different color as well to further show it as a link.

    @ Jeager, the above are good ideas, I’m going to look into the animation you suggested.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.