Question:

I'm kicking myself here as I've done this plenty of times before, but for some reason my code is not working and I can't workout why. I've been staring at it for a while now so that probably doesn't help. Anyway I'm trying to do a CSS on hover. So when you hover over a div with it displays another div.

<strong>HTML</strong>

<div class="pressListItem"> <img src="" width="" height=""> <h3>July 2013</h3> </div> <div class="pressItemHover">

This is come more content, lalala here is a little snippet

<span></span> <span>Read more</span> </div>

<strong>CSS</strong>

I'm using the opacity transition as I want it fade in.

.pressItemHover{ opacity: 0; transition: opacity 0.5s linear 0s; visibility: hidden; } .pressListItem:hover .pressItemHover{ opacity: 1; visibility: visible; } .pressListItem{ width: 200px; float: left; height: 200px; margin-right:12px; text-align: center; border: solid 1px #e4e4e4; }

If anyone could point out what I'm doing wrong it would be much appreciated!

Change the selector to:

.pressListItem:hover + .pressItemHover { opacity: 1; visibility: visible; }

<strong><a href="http://jsfiddle.net/j08691/BZLG5/" rel="nofollow">jsFiddle example</a></strong>

.pressListItem:hover .pressItemHover looks for an element with the class pressItemHover that is a descendant of pressListItem when in reality it's a sibling, in which case you want to use the adjacent sibling selector +.

In your HTML .pressListItem and .pressItemHover are <em>siblings</em>. In your CSS you're defining styles to a div which is a <em>child</em> of .pressListItem. You need to change HTML to this

<div class="pressListItem"> <img src="" width="" height=""> <h3>July 2013</h3> <div class="pressItemHover">

This is come more content, lalala here is a little snippet

<span></span> <span>Read more</span> </div> </div>

or if you don't wan't to restructure your DOM you can just change this part of CSS

.pressListItem:hover + .pressItemHover {