Nadam se da neko može da mi odgonetne ovaj bug (nadam se da je rešivo). U pitanju je varijacija na temu promene pozadinske slike preko jQuery-ja, ali uz razliku što se u divu nalazi sadržaj. Skoro svi primeri su prazan div ili indentovan tekst.
Problem je kada se pokrene efekat, element koji treba da promeni pozadinu se postavi preko sadržaja. I kada se tranzicija završi, on onda postavi tekst iznad.
Ja želim da tekst uvek bude na vrhu.
Probao sam zoom, z-index, overflow... I svakakve druge kombinacije, bez sreće.
Kod.
HTML kôd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Code snipet 5e</title>
<style type="text/css">
body
{
background: #FF9933;
}
#mainbox
{
position: relative;
height: 400px;
width: 800px;
}
.o_box
{
float: left;
width: 149px;
height: 149px;
display: block;
margin: 0 2px;
background: url(codesnipet5e.png) 0 0 no-repeat; /* 298x149 */
}
.o_box h1
{
color: #fffbcc;
font-size: 10pt;
margin: -149px 0 0 10px;
padding: 5px 0 0 0;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.o_box p
{
color: #FFFFFF;
font-size: 8pt;
margin: 8px 0 0 0;
padding: 0 6px 0 10px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.o_box p strong
{
border-bottom: 1px dotted #CCCCCC;
}
.hover
{
width: 149px;
height: 149px;
background: url(codesnipet5e.png) -149px 0 no-repeat; /* 298x149 */
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* @author Alexander Farkas
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
</script>
</head>
<body>
<div id="mainbox">
<a href="#" title="Naslov">
<div class="o_box">
<h1>Naslov</h1>
<p><strong>Istaknuto</strong> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst.</p>
</div>
</a>
<a href="#" title="Naslov2">
<div class="o_box">
<h1>Naslov</h1>
<p><strong>Istaknuto2</strong> tekst2 tekst tekst tekst2 tekst 2tekst tekst tekst tekst tekst2 tekst tekst2 tekst tekst tekst2 tekst tekst tekst tekst tekst tekst tekst tekst2 tekst.</p>
</div>
</a>
<a href="#" title="Naslov3">
<div class="o_box">
<h1>Naslov</h1>
<p><strong>Istaknuto 3</strong> tekst3 tekst3 tekst tekst3 tekst tekst tekst tekst3 tekst tekst tekst3 tekst3 tekst tekst3 tekst tekst tekst tekst3.</p>
</div>
</a>
<a href="#" title="Naslov4">
<div class="o_box">
<h1>Naslov</h1>
<p><strong>Istaknuto 4</strong> tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4.</p>
</div>
</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.o_box').prepend('<div class="hover" />').each(function () {
var $span = $('> div.hover', this).css('opacity', 0);
$(this).hover(function () {
// on hover
$span.stop().fadeTo(500, 1);
}, function() {
// off hover
$span.stop().fadeTo(500, 0);
});
});
});
</script>
</body>
</html>
P.S.
Pokušao sam da stavim spoiler tag, preko koda, ali nije htelo da radi.
U fajlu je i sličica.