Page 1 of 1

Make DIV appear absolute when hovering over container

Posted: Wed Aug 24, 2016 3:50 am
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>

Re: Make DIV appear absolute when hovering over container

Posted: Wed Aug 24, 2016 6:35 am
by Celauran
That's the style, but where's the markup?

Re: Make DIV appear absolute when hovering over container

Posted: Wed Aug 24, 2016 6:55 am
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.

Re: Make DIV appear absolute when hovering over container

Posted: Wed Aug 24, 2016 7:25 am
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...