mboehler3 Posted January 6, 2012 Share Posted January 6, 2012 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 More sharing options...
dsonesuk Posted January 6, 2012 Share Posted January 6, 2012 turn the span element into block element ie display:block and remove top: -349px; completely from element with class="fade", at present the span element is under the image, and the image is at fixed potion from the spam location. Link to comment Share on other sites More sharing options...
mboehler3 Posted January 6, 2012 Author Share Posted January 6, 2012 Thanks, that's worked perfect. Link to comment Share on other sites More sharing options...
mboehler3 Posted January 9, 2012 Author Share Posted January 9, 2012 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 More sharing options...
dsonesuk Posted January 9, 2012 Share Posted January 9, 2012 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 More sharing options...
mboehler3 Posted January 9, 2012 Author Share Posted January 9, 2012 Surprised I missed that, thank you for pointing it out. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.