Grow your CSS skills. Land your dream job.

Image Overlay Hover Experiment Darken all surrounding area besides…

  • # May 3, 2011 at 2:17 pm

    I had a project that my boss wanted me to do. He wanted to explain different sections of an image to a user by letting them hover over that section.

    For example if there was a picture of a city and you wanted to talk about a building in that city. The user could hover the building and a brief description would be shown.

    I came up with the idea to darken all the surrounding area but the area that is being hovered. Then show the description.

    I managed to do this with some tricky CSS / jQuery coding.

    You can see an example of this at http://jsfiddle.net/JoshMesser/Np8v2/

    I’m going to break down how I did this … maybe.

    I created a main DIV with a set width / height equal to the image being shown. Then set that image as the DIVs background.
    I made the div relative positioned so I could put absolute positioned elements within it.

    I then created block level Anchor tags that are absolute positioned through out the div.
    Giving those Anchor tags the same background as the background on the parent div I can simulate a view area.

    I came up with some jQuery code to allow me to control the top / left / height / width of each Anchor tag so I can position them with ease.

    Using background position I moved the background image of each Anchor tag to match there position (top / left) within’ the parent DIV.

    There for giving the illusion of fading the surrounding area.

    I know that this doesn’t really make a lot of sense by reading it. Just check out the jsFiddle Link above.

    # May 3, 2011 at 2:43 pm

    Wouldn’t using HTML Mapping have been easier?

    # May 3, 2011 at 2:55 pm

    I wouldn’t have been able to add a background image to a image map nor could I assign any kind of text or other element to it via an ID / Class

    But for a simple things images maps are good. Just not to achieve this effect.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".