CODEWITHSUNDEEP
htmlcss
fnune
fnune

Reputation: 5534

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?

Upvotes: 1

Views: 535

Answers (3)

pwnchaurasia
pwnchaurasia

Reputation: 1499

With some modification to your code it can results as you desired. There may be some other ways to do this, but they can be other answers.

<!DOCTYPE html>
  <html>
    <head>
      <title></title>
       <style type="text/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;
       }

      p {
        position: absolute;
       top:0;
       display: none;
       width:100%;
      height: 50px;
      text-align:center;
      bottom:50px;
        }

           .album:hover p{
         display: block;
        font-size: 20px;
              }
       .album:hover{
        -webkit-filter: grayscale(100%) brightness(50%);

           }

        </style>

         </head>
            <body>

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


</body>
</html>

Upvotes: 0

chrisbedoya
chrisbedoya

Reputation: 810

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>

Upvotes: 3

user3151165
user3151165

Reputation: 35

If I understood your question correct... This will work for you. :)

http://codepen.io/anon/pen/JYjgmy

.album p {
  opacity:0;
}

.album:hover p {
  opacity:1;
}

Upvotes: 1

Related Questions