Jump to content

Contain Fluid Image With Rollover Fade Effect


Recommended Posts

Hi, I am trying to create a rollover fade effect for images on my page here: http://acq.matthewboehler.com/test.php. The large kitchen image does the rollover right now. I found the rollover fade script online, and it places one image on top of the other. If you shrink your browser, you'll see the images do not stay on top of each other. In Firefox, the original image is moved up. In Internet Explorer, it places the rollover image directly below the original image. In Safari, it works perfect, exactly how it should. Is it possible to put a container around the images so they stay in place, like in Safari? I've tried putting a div tag around the image, making the max-width 100%; max-height 100%, but that did not work. Any help you can offer is greatly appreciated.

Link to post
Share on other sites

After applying the "fade" class to every image, the two images in the center column underneath the large kitchen image aren't working well together - the right "horse" image is not appearing. When you refresh the browser, you can see the image for a split second, but then it goes away. I put each image in its own container, but that's not working. Is there CSS I can apply to the classes to fix this, without having to alter the JS?

Link to post
Share on other sites

The horse_off image is positioned absolute, and occupies no space, it relies on the _on image to define the area width/height to show itself, the _on image is broken and not found, that's why you see the horse_off image for a split second before the area it occupies shrinks to zero height.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...