CSS display div on another div:hover
Question
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?
3 answers
solution1
3 ACCPTED 2015-09-02 17:20:35
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;
}
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>
solution2
1 2015-09-02 17:30:37
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;
}
solution3
0 2015-09-02 18:19:59
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.