Здравейте, ще ви разкажа накратко за какво иде реч. Имам един скрипт с който като посочиш снимка се изпълнява фейд ин и снимката се запълва с някакъв цвят, и после естествено и фейд аут. До тука всичко си работи но искам към този ефект да добавя и текст върху запълващия фон в средата например, като друга картинка не ми върши работа понеже искам текста да е различен за всяка снимка. Ето и какво имам до тук.
ХТМЛ
ЦСС
ДЖАВА СКРИПТ
ХТМЛ
Код:
<ul>
<li><a href="http://www.google.bg"><div class="fadeThis"><span><img src='images/2km6kq.jpg' width='140' /></span></div></a></li>
</ul>
ЦСС
Код:
.fadeThis * {
display: none;
}
.fadeThis span.hover {
margin-left:3px;
margin-top:-115px;
width: 138px;
height: 110px;
background:#ccc;
cursor:pointer;
color:#000;
}
ДЖАВА СКРИПТ
Код:
<script type="text/javascript">
$(document).ready(function() {
$('.fadeThis').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
});
</script>