PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sat Jun 23, 2018 5:19 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 4 posts ] 
Author Message
PostPosted: Wed Aug 24, 2016 3:50 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4417
Location: United Kingdom
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.

Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Wed Aug 24, 2016 6:35 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
That's the style, but where's the markup?

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Wed Aug 24, 2016 6:55 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4417
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Wed Aug 24, 2016 7:25 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4417
Location: United Kingdom
Scratch that, I realized I had too much in my H2, so have redone it all.

Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group