html - javascript text overlay HTML5

Question

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 trouble.

this particular section needs some repair, I suppose...

            <!--- Begin Content --->
        <div id="main">                     
            <!--- Begin Reel Markup --->
            <div id="reel">                             
                    <!-- Thumb Items -->
                    <article class="item thumb" data-width="282">                              
                            <a href="#myToggle" data-target="#myToggle" class="panel">
                            <img src="images/thumb/1.jpg" />
                            </a>
                         <div id="myToggle" class="cap-overlay hide">
                             <h5>Thumb Title</h5>                                
                            <div class="content">
                                Name: name.jpg<br />
                                Details: Details Text<br />
                            <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> 
                            <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> Delete</a>
                            </div>
                        </div>                                                                                                        
                    </article>
             </div>
         </div>

Any solution ? or Any alternative ?

PS : I have tried almost every possible popular plugin but no luck

Answer 1

Here is a quick example I just baked with pure CSS

HTML

<div class="box">
    <div class="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>
    <img src="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