Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS a REAL image hover (/css popup) challenge!

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #34290
    JussiV
    Member

    Hello there! Long time CSS user, first time writer on this forum :)

    I am explaining this as easily as one can, however in order to portray what I mean, please also see the example picture linked below…

    I’m not sure whether this is even possible to do (easily and without flash), but basically I have one large pic, which includes 3 elements that work as the navigation menu:

    * Has 3 primary elements (a red, a green and a blue one) within, that hover individually when mouseover
    * Also 2 other locations/elements that hover, but with different colours, depending on primary element (red element with red, blue with blue, green with green…)

    So of course, a normal hover would be easy to do – just cut the main pic in smaller pieces, and use hover effect where needed. BUT when it should also affect other areas, that’s the problematic part!

    I was thinking something maybe with hover element absolute positioning and using z-values……?

    Hence, while there is mouseover on one of the hover elements, I want two other locations to also “hover” (and with different colours, depending on which element is the primary hover!)

    What I mean is this:
    http://curriculumvit.ae/examplequestion.jpg

    The filled ones are the 3 primary elements, and the lined boxes are the 2 additional hover elements that use the related hover (red element with red, green with green…)

    Hence, with Red element, that one will hover, but also two other locations should have red colour, but when mouse goes over to element Blue, it should hover AND the two other locations should have the blue hover pic too.

    I’ve been looking for solutions for a while, but just cannot seem to find anything that would match (or that I could work with and modify to get the desired solution!)

    Thanks if you’ve managed to read this far, and thanks even more if you can help!!!

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.