JQuery наложение при нажатии изображения

Question

Не самое лучшее с jquery, может кто-нибудь предложить общий подход к тому, чего я пытаюсь достичь, пожалуйста?У меня есть сетка фотографий, и когда на них нажимают, поверх всей картинки будет анимирован непрозрачный оверлей, который будет содержать некоторый динамически заданный текст.У меня есть изображения, и обработчик onclick работает, просто пытаюсь найти лучший способ применить оверлей.спасибо

Answer 1

Не очень семантически, но следует выполнить работу: Допустим, ваши imgs 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>

// и т.д ...

Тогда 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
}

Это чистое решение CSS, без анимации, работает для пользователей с Javascript.

Если вы хотите анимировать его с помощью Jquery:

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

затем при нажатии / наведении мыши

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

Answer 2

Проверьте, может ли этот сайт вам помочь. http://flowplayer.org/tools/overlay/index.html