Javascript Text Overlay Html5

I am tyring to get the text overlay effect like here http://ryun.github.io/HCaptions/ on this template : http://html5up.net/parallelism/ Multiple javascripts on single page is trou

Solution 1:

Here is a quick example I just baked with pure CSS

HTML

<div class="box">
    <divclass="caption">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur repellat ad reprehenderit est consequatur saepe reiciendis earum quasi alias magni autem suscipit a blanditiis nam eius explicabo deleniti quam!
    </div><imgsrc="http://html5up.net/uploads/demos/parallelism/images/thumbs/02.jpg"alt=""></div>

CSS

*{
    box-sizing: border-box;
}

.caption{
    position:absolute;
    top:-500px; left:0; right:0;
    background: rgba(0, 0, 0, 0.5);
    color:white;
    font-family:arial;
    padding:30px;
    text-align:justify;
    transition: all 500ms ease;
}

.box{
    width:383px;
    height:212px;
    position:relative;
    overflow:hidden;
}

.box:hover.caption{
    top:0;
    bottom:0;
}

Demo

If you added all the correct vendor prefixes this would be cross browser and mostly cross browser ( with transitions )

If you like icing on your cake you could find some here http://cubic-bezier.com/#.17,.67,.83,.67