Make DIV appear absolute when hovering over container
Posted: Wed Aug 24, 2016 3:50 am
I'm trying to make a paragraph block appear at the very top of a DIV, when the containing DIV is hovered.
The idea is that the DIV has an image. There is a central opaque box with H2 content. When you hover over, the paragraph of extra information will show (fading in 0.2s).
I cannot get the <p> to show when hovering though.
The idea is that the DIV has an image. There is a central opaque box with H2 content. When you hover over, the paragraph of extra information will show (fading in 0.2s).
I cannot get the <p> to show when hovering though.
Code: Select all
<style>
.home-column
{
float: left;
width: 50%;
}
.home-column-inner
{
position: relative;
height: auto;
}
.home-column-inner p
{
display: none;
}
.home-column-inner:hover .home-column-inner p
{
display: block;
position: absolute;
bottom: 0px;
background-color: rgba(255, 255, 255, 0.75);
padding: 10px;
text-align: center;
font-size: 2em;
font-weight: 300;
color: #333333;
}
.home-column-inner h2
{
position: absolute;
left: 50%;
top: 50%;
background-color: rgba(255, 255, 255, 0.75);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
/* unnecessary styling properties */
width: 70%;
text-align: center;
margin: 0px;
padding: 10px;
text-align: center;
font-size: 2em;
font-weight: 300;
color: #333333;
}
.home-column-inner h2 a
{
font-size: 0.8em;
font-weight: 300;
color: #333333;
}
.home-column-inner h1
{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
/* unnecessary styling properties */
width: 60%;
text-align: center;
margin: 0px;
padding: 20px;
text-align: center;
font-size: 4em;
color: #ffffff;
font-weight: 300;
}
</style>