PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Aug 16, 2018 5:29 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 3 posts ] 
Author Message
PostPosted: Tue Apr 26, 2016 4:52 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4420
Location: United Kingdom
Hi

We are looking adding in a footer of a site, a row of thumbnail images each in a floating div.

When the user hovers over that div/image, we want it to darken and some text appear over it in the middle.

I assume I could add a div that would be the same height as the div containing the image, and on over of that DIV, the other div's display would become "block" and we could set the opacity.

Cannot seen to figure out how to do this though?
I think to make the overlayed div the full height of it's container, we would need to maybe use the image that's pushing out the existing div's size, (or a transparent copy of it), so that overlay is forced to be full size.

But how do we make the overlay div hide.. and then show on hover, purely with CSS?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Tue Apr 26, 2016 5:01 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4420
Location: United Kingdom
This is what I thought would do it, but the "overlay" div is going huge.
Syntax: [ Download ] [ Hide ]
<style>

.footer-projects
{
float: left;
width: 33%;
margin-right: 5px;
margin-bottom: 5px;
display: relative;
}

.footer-projects img
{
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.footer-projects-overlay
{
width: 100%;
display: none;
position: absolute;
}

.footer-projects:hover .footer-projects-overlay
{
border: 1px solid #ffff00;
display: block;
}

.footer-projects-overlay img
{
opacity: 0;
width: 100%;
}

</style>


 <div class='footer-col2'>
  <div class='footer-title'>Latest Projects</div>
  <?php
  $result = mysql_query ("SELECT * FROM projects ORDER BY id LIMIT 0,6");
  while ($row = mysql_fetch_object($result))
     {
     $project = str_replace(" ", "-", $row->projectname);
     $project = strtolower($project);
     echo "<div class='footer-projects'>
     <div class='footer-projects-overlay'><img src='/images/projects/small/$row->image' />$row->projectname</div>
     <a href='/projects/$project'><img src='/images/projects/small/$row->image' /></a></div>"
;
     }
     mysql_free_result($result);
  ?>
  <div style='clear: both'></div>
  </div>

 

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Tue Apr 26, 2016 5:04 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4420
Location: United Kingdom
Idiot... I've got display: relative.... not position.

_________________
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  [ 3 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


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