Make DIV appear absolute when hovering over container

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Make DIV appear absolute when hovering over container

Post by simonmlewis »

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.

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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Make DIV appear absolute when hovering over container

Post by Celauran »

That's the style, but where's the markup?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Make DIV appear absolute when hovering over container

Post by simonmlewis »

Code: Select all

<div class='home-column'>
<div class='home-column-inner'>
<a href='/ur'><h2>Simple Text</h2><p>paragraph text here</p></a>
  <div class='home-column-image'><a href='/url'><img src='/images/image.jpg' alt='tag' /></div></a></div>
</div>

<div class='home-column'>
<div class='home-column-inner'><a href='/url'>
<h2>title two</h2><p>paragraph text here.</p></a>
  <div class='home-column-image'><a href='/url'><img src='/images/image.jpg' alt='tag' /></div></a></div>
</div>
<div style='clear: both'></div>
The problem is, on a mobile the Paragraph text doesn't quite fit, and it's worse on a tablet. so I want to make the text appear on hover only.

Plan B is to make the opaque H2, an opaque DIV, and then put the H2 and P in there.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Make DIV appear absolute when hovering over container

Post by simonmlewis »

Scratch that, I realized I had too much in my H2, so have redone it all.

Code: Select all

<style>

.home-column
{
float: left;
width: 50%;
}

.home-column-inner
{
position: relative;
height: auto;
}


.home-column-inner-trans p
{
padding: 0px;
margin: 0px;
text-align: center;
font-size: 1.4em;
font-weight: 300;
color: #333333;
}

.home-column-inner-trans
{
    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;
}

.home-column-inner-trans h2
{
padding: 0px;
text-align: center;
font-size: 2em;
font-weight: 300;
color: #333333;
}

</style>
<div class='home-column'>
<div class='home-column-inner'>
<div class='home-column-inner-trans'>
<a href='/ur'><h2>Simple Text</h2><p>paragraph text here</p>
</div>
  <div class='home-column-image'><img src='/images/image.jpg' alt='tag' /></div></a></div>
</div>
<div class='home-column'>
<div class='home-column-inner'>
<div class='home-column-inner-trans'>
<a href='/ur'><h2>Simple Text</h2><p>paragraph text here</p>
</div>
  <div class='home-column-image'><img src='/images/image.jpg' alt='tag' /></div></a></div>
</div>
<div style='clear: both'></div>
Right, back to work...
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply