Question

Not the best with jquery, can someone suggest a general approach for what i am trying to achieve please? I have a grid of photos, and when they are clicked on, an opaque overlay will be animated on top of the entire picture, the overlay will contain some dynamically set text. I have the images, and the onclick handler working, just trying to figure out the best way to apply the overlay. thanks

Answer 1

Not very pretty semantically, but should get the job done :
Let’s say your imgs are 200×200.

<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>

<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>

<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>

// etc…

Then, the CSS :

.imgcontain
{
position: relative;
width: 200px;
height: 200px;
overflow: hidden; // not sure you want to makes the overlay just show or slide from top. This is useful only if it should slide.
}

.imgcontain img
{
position: absolute;
width: 200px;
height: 200px;
top: 0px;
left: 0px;
z-index: 2;
}

.imgcontain p
{
position: absolute;
display: block;
width: 200px;
height: 200px;
top:  0px; // if slide from top, -200px
left: 0px;
background: rgba(0,0,0,0.5) // or a background image like a transparent png with repeat
z-index: 1;
}

.imgcontain:hover p
{
z-index: 3; // if slide from top, top: 0px
}

This is a pure CSS solution, without animation, works for users with Javascript of.

If you want then to animate it using Jquery :

$(.imgcontain p).hide().css('z-index','3'); // on ready, hide the overlay. Maybe throw the .css() in callback.

then, on click/mouseover

$(.imgcontain).click(function()
{
$(.imgcontain p).show();
});