Question

Hoping for some advice around a CSS issue – I have a layout where I’m absolutely positioning link text above a background image, but cannot get the link to expand to the height of the container (in IEx, works fine in Chrome)

<div>
    <img />
    <a />            
</div>

The containing div has a background colour, and the image has its opacity reduced – on hovering the image, the opacity reduces further, leaking more of the background color. At the same time, the opacity of the link changes from 0 to 100. I’m using a few CSS transitions as well, just to prettify it.

I know that positioning the link absolutely removes it from the flow, so setting height to 100% won’t work, but shouldn’t I be able to set it explicitly? Doing so works in Chrome but not IE. Problem is related to the image, as the link behaves correctly if it is removed.

Example:http://jsfiddle.net/thSCJ/8/ (includes just enough detail to highlight my problem. In IE, hovering the top left of the image reveals the link. In Chrome, any hover on the image reveals the link).

Any suggestions?

Answer 1

You need to have the <a> tag wrapping the image and the text:

<a href="#">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6kpJ562NTt7Vkya4ocQ3Aq7mVqNB04ccB9XNCr-b4mPdYU6Y5Yg" width=200 height=200/>
    <span>Link text</span>
</a>​

Here is the CSS:

a {
    width:200px;
    height:200px;
    background:#cccccc;
}

a:hover > span {
    display: inline;
}

span {
    display: none;
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    color:red;      
}

​

Fiddle: http://jsfiddle.net/thSCJ/12/