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 a 2-by-2 grid of images arranged using float property in CSS.
I want to show a small overlay on each image when i hover over it, by switching its opacity from 0 to 1 on hover. My code works great when i hover the images in the top row.
But when I hover over the lower-row images, the overlay activated is still the one from the top row.
I think its an issue with positioning.
My code is here : http://jsfiddle.net/zZXZX/27/
PS : please dont mind the minor faults with the design.
You are positioning your overlay in absolute, without specifying a relative parent.
http://jsfiddle.net/tomprogramming/zZXZX/28/
position:absolutepositions your overlay with offsets relative to its first parent that is notposition:static, or if none are found, the document root.