如何在悬停时滑出内容 - flexbox-layout

Question

我有一个漂亮的小着陆页，里面有大图片和带有标题的小方框。

如果您将鼠标悬停在标题上，它周围的框应该会滑出（获得更大的宽度，但不应该将图片推开，而是应该在图片上方）旁边的图片并在那里显示一些文字。这一切都是在 flexbox-bootstrap 布局中完成的。

position: absolute、z-index 和一些 left 或 right 的东西即使在 flexbox-content 中也能做到这一点吗？还是我必须使用一些 jscript/jQuery 的东西？

这是我的靴子：http://www.bootply.com/d2liwNZnCH

以及更大利益的代码：

<main class="container">
                <div class="row row-flex row-flex-wrap">
                    <div class="col-md-3 bgb fw">
                        <div class="contentbox flex-col">
                            <h2>example</h2>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="imagecontainer">
                          <img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="imagecontainer">
                            <img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
                        </div>
                    </div>
                    <div class="col-md-3 bgr fw">
                        <div class="contentbox flex-col">
                            <h2>example</h2>
                        </div>
                    </div>
                </div>
                <div class="row row-flex row-flex-wrap">
                    <div class="col-md-8">
                        <div class="imagecontainer">
                            <img src="http://placehold.it/1265x365" alt="Beispielinhalt" class="img-responsive">
                        </div>
                    </div>
                    <div class="col-md-4 bgp fw">
                        <div class="contentbox flex-col">
                            <h2>example</h2>
                        </div>
                    </div>
                </div>
                <div class="row row-flex row-flex-wrap">
                    <div class="col-md-5 bgg fw">
                        <div class="contentbox flex-col">
                            <h2>example</h2>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="imagecontainer">
                            <img src="http://placehold.it/765x365" alt="Beispielinhalt" class="img-responsive">
                        </div>
                    </div>
                </div>
            </main> <!-- Maincontent -->

css:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        margin: 0;
        padding: 0;
    }
    .row-flex, .row-flex > div[class*='col-'] {  
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
    }

    .row-flex-wrap {
        -webkit-flex-flow: row wrap;
        align-content: flex-start;
        flex:0;
    }

    .row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
         margin:-.2px; /* hack adjust for wrapping */
    }

    .container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
        width:100%;
    }


    .flex-col {
        display: flex !important;
        display: -webkit-flex !important;
        flex: 1 100%;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
    }

    .flex-grow {
        display: flex;
        -webkit-flex: 2;
        flex: 2;
    }
    h1, h2, h3, h4, h5, h6 {
        margin-top: 0px;
        word-break: break-word;
    }
    .contentbox {
        padding: 15px 30px 15px 30px;
        text-align: center;
        display: block;
    }
    .contentbox h2 {
        font-variant: small-caps;
    }
    .imagecontainer {
        display: block;
    }

Answer 1

使用第二个“.contentbox”-div 和一些辅助类以及 jQuery 单击事件来完成，我选择将内容框本身中的 readmore-text 淡化到居中标题上方。

html:

<div class="col-lg-3 col-sm-6 col-xs-12 fw">
                        <div class="contentbox readmore bgr flex-col">
                            <h2>example</h2>
                        </div>
                        <div class="contentbox expand bgr flex-col">
                            <span aria-hidden="true" class="pull-right closebox">&times;</span>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
                            <p><a href="#" class="btn btn-default">read more</a></p>
                        </div>
                    </div>

css:

.contentbox {
        padding: 15px 30px 15px 30px;
        text-align: center;
        display: block;
        height: auto;
        min-height: 160px; /* Only for my layout */
    }
    .readmore {
        cursor: pointer; /* So your complete box seems clickable */
    }
.expand {
        position: absolute;
        top: 0; /* You can switch these values to whatever values wished */
        left: 0; /* It will then slide from the direction you chose */
        right: 0; /* but remember to put the chosen direction to 0 again on .expanded */
        bottom: 0; /* for me, the fadeeffect was the most elegant way */
        font-size: 15px;
        opacity: 0;
        visibility: hidden;
        transition: all .75s ease-in-out;
    }
    .expanded {
        top: 0;
        opacity: 1;
        visibility: visible;
        cursor: default;
        transition: all .75s ease-in-out;
    }
    .closebox {
        font-size: 24px;
        position: absolute;
        right: 10px;
        top: 0px;
        cursor: pointer;
    }

文档中的js准备好了：

$(".readmore").click(function(){
        $(this).next(".expand").addClass("expanded");
    });
    $(".closebox").click(function(){
       $(this).parent(".expanded").removeClass("expanded"); 
    });