-1

我很想 在这个模板上获得像这里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：我尝试了几乎所有可能的流行插件，但没有运气

4

1 回答 1

0

这是我刚刚用纯烘焙的一个简单示例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;
}

演示

如果您添加了所有正确的供应商前缀，这将是跨浏览器并且主要是跨浏览器（带有转换）

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

于 2013-07-14T22:07:28.883 回答