Demo

Question

我想要获得文字叠加效果，例如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找到一些

javascript文字叠加HTML5

1 个答案:

Demo