Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I have an image that, when hovered over, should display another image with 4 absolutely positioned links. This code works in Chrome, Firefox, Safari, and all versions of IE except IE7. Any help with IE 7?
Here’s the JS Fiddle: http://jsfiddle.net/derekbrown/2qVK2/21/
Thanks in advance!
The problem here is that the initial image is still taking up space on the page despite setting opacity to 0. This can be seen by editing the line which sets the image to opacity 0 to 1; when hovered both images will be shown side by side.
You need to somehow remove the initial image from the document flow on hover. This is normally done by setting the display property to none. I’ve updated the jsfiddle to show this in action but the animation is totally smooth. Ill edit my answer I can improve on its implementation
http://jsfiddle.net/2qVK2/19/
EDIT: This is better, sets the width, animation is much smoother.
http://jsfiddle.net/2qVK2/20/