Fausto NA Fausto NA - 3 months ago 9
CSS Question

CSS display div on another div:hover

I want to display the

p
elements on top of the images (the IDs are used for CSS background images) when I hover over the album elements (the images). I have tried the following:



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

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

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

.album:hover p {
opacity: 1;
}

<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>





I have also tried
display:none;
and
display:block
on
:hover
but none seem to be working for me. What am I doing wrong?

Answer

If you want a quick fix just make the declarations on the .album:hover p class important, and add a transition to the p tag.

#gallery .album p {
    transition: all 0.5s ease;
}

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

http://jsfiddle.net/w3hutbu8/

A better fix:

This happens because your #gallery .album p styling is overriding the .album:hover p one (an ID is more "important" than a class).

You can either remove the #gallery from #gallery .album p or add it to .album:hover p and then it will work without the !important tag.

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

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

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

.album:hover p {
  opacity: 1;
}
<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>