Take the 2-minute tour ×

This is my first post. I'm still learning CSS and your help is much appreciated.

I have been trying to create a Div that contains an image with a transparent overlay with a semi transparent border at the bottom. On hover, a second transparent overlay is added making the bottom border darker. I then have another div containing some title text, the title text should change colour on hover anywhere in the parent Div as well as the whole thing be linked on click.

The closest thing to it is on Vimeo here:


I have managed to achieve all of this and it has been working fine in IE and Firefox and safari etc. But with IE10 the text no longer changes colour on hover nor is the div clickable.

Here's my CSS:

.videoCatThumbImg {
    width: 178px;
    height: 178px;
    padding: 5px 5px 5px 5px;
    margin: 10px 0px 0px 0px;
    border: 1px solid #CCCCCC;

.videoCatTskin {
    position: absolute; top: 5px; left: 5px;

.videoCatThumbHover {
    position: absolute; top: 5px; left: 5px; display: none;

.videoCatThumbImg:hover .videoCatThumbHover{
    display: block;

.videoCatTitle {
    top:5px; left:5px;
    padding:152px 0px 0px 5px;
    color: #ffffff;

.videoCatTitle:hover {
    color: #5798ca;

and here's my HTML:

<div class="videoCatThumbImg">
    <img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
    <img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
    <img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
    <a href="http://www.mydomain.com/category/356"><div class="videoCatTitle">Some Text Here</div></a>

Any advice on what I'm doing wrong is very welcome.

share|improve this question
You typically wouldn't put a block level element (<div>) inside of an inline element (<a>). –  Sparky Jan 3 '13 at 18:07
I know you are looking for a CSS specific solution, I would suggest however you take a jQuery approach. Hide the div with the text and use jQuery to show/hide the text element (with opacity). –  Lowkase Jan 3 '13 at 18:13
Would you mind posting a fiddle of the issue? –  Nick Jan 5 '13 at 7:56
add comment

2 Answers

Similar to this answer, try adding a background (transparent image or same-color will work), to the hover classes that don't have it (.videoCatThumbImg:hover).

share|improve this answer
hi Lokasi - I tried adding a background color to but that didnt work. Hi Sparky. How would I achieve the same without the div element? –  Ruf1 Jan 3 '13 at 18:28
add comment

Just had the problem. None of the solutions were working (border, background, hasLayout).

In the end, I switched to XHTML 1 Strict doctype and it worked, if it can help...

share|improve this answer
add comment

Your Answer


