Jump to content

Contain Fluid Image With Rollover Fade Effect


mboehler3
 Share

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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...