Наложение картинки на img

[Dael777]

Всем привет!

 

Столкнулся вот с какой проблемой.

 

Есть слайдер, упрощенная структура такая:

<div id="mySlider">

   <img src="1.jpg" /> //Меняющиеся картинки

   <img src="2.jpg" /> //Меняющиеся картинки

   ...

</div>

Мне нужно каким-то образом на меняющиеся картинки <img> наложить нарисованную дизайнером сетку.

 

Я пробовал так: сделал новый дивник (#transparent), навесил на него в виде background: url('png с прозрачным фоном') мою картинку в виде сетки и абсолютом накинул этот дивник на картинки слайдера.

 

Получилось примерно так:

<div id="mySlider">

   <img src="1.jpg" />

   <img src="2.jpg" />

   ...

</div>

<div id="transparent"></div> //Дивник с картинкой в виде сетки

Вытащив z-index'ом мой дивник на передний план, визуально все стало как надо.

 

Но, естественно, весь функционал слайдера оказался закрыт этой картинкой, т.е. стрелки, крутилки и пр. оказались за этой сеткой, и стали неактивны.

 

Подскажите пожалуйста, как можно решить данную задачу, сохранив при этом функционал слайдера при наведении на него?

[klierik]

пример для размышлений: http://jsfiddle.net/klierik/p2cjZ/

[Dael777]

Большое спасибо! Благодаря данному примеру получилось сделать!