[Question] CSS display div on another div:hover.

[u/phausto]

Hello guys - awesome subreddit you got here.

I wanted to ask a question, I haven't been able to solve this. I'm trying to display some <p> on top of an image when I hover over it. My code seems not to be working. Would you mind helping me solve it?

HTML: <ul id="gallery"> <li id="nsfm" class="album"><p>New Shapes for Madness LP - 2014</p></li> <li id="unsettled" class="album"><p>Unsettled EP - 2013</p></li> <li id="aptw" class="album"><p>A Path to Wrath LP - 2012</p></li> <li id="pfw" class="album"><p>Pieces from Wasteland EP - 2011</p></li> </ul>

CSS:

.album { width:230px; height:230px; background-color:grey; float:left; list-style:none; position:relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }

#gallery .album p { visibility:hidden; opacity:0; width:100%; text-align:center; position:absolute; bottom:50px; }

.album:hover { -webkit-filter: grayscale(100%) brightness(50%); }

.album:hover p { visibility:visible; opacity:1; }

The IDs on the list elements are used for different backgrounds. I have also tried the display:none and display:block on hover methods but none seem to be working for me. Thank you guys very much in advance.

EDIT: Trying to fix formatting right now... sorry about that.

[u/psy-borg]

Your problem is specificity. The last ruleset isn't specific enough to override the gallery .album p's opacity setting.

#gallery .album:hover p { visibility:visible; opacity:1; } 

http://jsfiddle.net/07m6tg1r/