Javascript наложение текста HTML5

Question

Я Tyring, чтобы получить эффект наложения текста, как здесь http://ryun.github.io/HCaptions/ на этом шаблоне: http://html5up.net/parallelism/ Несколько JavaScripts на одной странице неприятности.

этот конкретный раздел нуждается в некотором ремонте, я полагаю ...

  <!--- 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> 

Любое решение? или Любая альтернатива?

PS: Я попробовал почти каждый возможный популярный плагин, но не повезло

Answer 1

Вот краткий пример, который я только что испеченный с чистым 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

Если вы добавили все правильные префиксов поставщика, это будет кросс-браузер и в основном кросс-браузер (с переходами)

Если вы как глазурь на вашем торте вы можете найти здесь http://cubic-bezier.com/#.17,.67,.83,.67