Question

I’m trying to make some sliding captions, something like Mosaic, but lighter. Everything looks good in all major browsers (even if it looks slow in ie8), but nothing happens in ie7.
I’m testing with ieTester, and I have no idea if the bug comes from the software or from my code.
I’m sure you’ll have some tips to help me improve it!

Thanks anyway.

HTML:

<div class="imgbox">
 <img src="#" />
 <a href="#" class="caption">
 <div class="details">
 <h6>Lorem ipsum</h6>
 <p>Lorem ipsum dolor sit amet,…</p>
 </div>
 </a>
</div>

CSS:

.imgbox{
 width: 204px;
 height: 154px;
 position: relative;
 overflow: hidden;
 float: left;
 margin: 10px;
 border:1px solid #999;
 -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);}

.imgbox img{
 width: 200px;
 height: 150px;
 padding: 2px;
 overflow: hidden;}


.caption{
 display:block;
 position:absolute;
 top:104px;
 height:100%;
 width:100%;

 background: rgb(0,0,0);
 background: rgba(0,0,0,0.6);  
 background: transparent\9;
 zoom: 1;
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);}

JS:

$(".imgbox").hover(
    function() 
    {$(this).children('.caption').animate({top:0},"fast");},
    function() 
    {$(this).children('.caption').animate({top:104},"fast");}
 );

Answer 1

I found that it came from the position of the caption. I set a top position but didn’t define any left or right position.
With that piece of code it now appears on ie7:

.caption{
 display:block;
 position:absolute;
 top:104px;
 left:0;
 height:100%;
 width:100%;

But it’s still very slow on ie8 and ie7.
Anyway, problem solved!