javascript文字叠加HTML5 [英] javascript text overlay HTML5

问题描述

我想获得像这里的文字叠加效果 http://ryun.github.io/HCaptions/ 此模板上的
： http://html5up.net/parallelism/
单页上的多个javascripts很麻烦。

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：我已经尝试了几乎所有可能流行的插件但没有运气

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

推荐答案

这是一个我刚刚用纯 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 )

如果你喜欢锦上添花，你可以在这里找到一些 http://cubic-bezier.com/#.17,.67,.83,.67

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

这篇关于javascript文字叠加HTML5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！