Page 1 of 1

DIV darkened overlay over another div needed

Posted: Tue Apr 26, 2016 4:52 am
by simonmlewis
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?

Re: DIV darkened overlay over another div needed

Posted: Tue Apr 26, 2016 5:01 am
by simonmlewis
This is what I thought would do it, but the "overlay" div is going huge.

Code: Select all

<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>


Re: DIV darkened overlay over another div needed

Posted: Tue Apr 26, 2016 5:04 am
by simonmlewis
Idiot... I've got display: relative.... not position.