Jquery slider boxes

Question

Not sure if this is a javascript issue or can be solved with CSS.

Im using an image with a text overlay slider but seem to having some issues with where the slider starts on page load. This is the live example, I would like the slider to be hidden on load and appear from below on rollover.

http://www.warface.co.uk/clients/detail-shoppe/directors

Many thanks

Answer 1

You can just add the initial top value to your CSS, like this:

.boxcaption{
  top: 240px;     /* add this! */
  float: left;
  ....
 }

This should give you the initial effect you want, and on hover it'll slide up on the first hover.

Answer 2

Just include this line which sets the inital css so that the two .cover divs are "hidden"

$('.boxgrid.captionfull .cover').css('top', 240);

like this

...
$(document).ready(function(){
    $('.boxgrid.captionfull .cover').css('top', 240);
    //Full Caption Sliding (Hidden to Visible)
...