-1

このテンプレートでhttp://ryun.github.io/HCaptions/のようなテキスト オーバーレイ効果を得ようとしています : http://html5up.net/parallelism/

この特定のセクションは、いくつかの修理が必要だと思います...

            <!--- 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 に答える