Grow your CSS skills. Land your dream job.

hover function (over one div) to change background image in another div?

  • # June 6, 2013 at 7:11 pm

    I am (probably obviously) only barely literate in CSS, and trying to update an older website that primarily used javascript. I currently have a block of small square thumbnails of photos, and if you scroll over one thumbnail the JS is set for mouse over= swap image in another element from a blank image to a full size image of the thumbnail. This has worked in the past, but currently the function to swap the image in the secondary box seems to be interfering with the rollover image I have inside the thumbnail. I was hoping there was an easy way to code the thumbnail that, on hover, the secondary image comes up. Is this possible?

    # June 6, 2013 at 7:19 pm

    This is what I have now in the code for just one of the thumbnail boxes. If there isn’t a clean CSS option, maybe someone can suggest a workaround for the swap image restore glitch (where the large image in the secondary div (imagefieldvert) restores on mouse out, but the rollover image in the thumbnail (the b2) does not. I’m using Dreamweaver, and the program places a single swap image restore command for all image swaps. As you can see, I also have it set to show text on mouse over, but I’m not having any problems with this. You can see the final desire effect on my website (http://www.metalemily.com/portfolio/PortfolioRend.html).

    # June 6, 2013 at 7:19 pm

    sorry, i guess i don’t know how to post the code properly!

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".