CSS hover not working on hidden elements?

css image styling
L84 picture L84 · Jul 11, 2011 · Viewed 10.1k times · Source

I am not sure what is going on here but the rollover is not working correctly and I can't seem to figure it out.

I am using very basic and simple css:

open{visibility:hidden;}
open:hover{visibility:visible;}

http://www.ubhape2.com/messages/files/chameleon/ is the page i am working on

Please forgive the god awful code. I am using it as a simple and quick method. Just need the roll over to work and I am good.

Answer

balping picture balping · Aug 3, 2014

You can use the opacity property:

.open{opacity:0;}
.open:hover{opacity:1;}

Related questions

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
How to vertically align an image inside a div

How can you align an image inside of a containing div? Example In my example, I need to vertically center the <img> in the <div> with class ="frame": <div class="frame" style="height: 25px;"> &…

Read More
CSS force image resize and keep aspect ratio

I am working with images, and I ran across a problem with aspect ratios. <img src="big_image.jpg" width="900" height="600" alt="" /> As you can see, height and width are already specified. I added CSS rule for images: …

Read More