Блог

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

Не очень красиво семантически, но должно выполнить работу: допустим, ваши изображения размером 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();
});
 

Проверьте этот веб-сайт, возможно, это поможет вам. http://flowplayer.org/tools/overlay/index.html