Question

我有一个漂亮的小页面，上面有大图片和带有标题的小盒子。

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

即使在flexbox内容中，position: absolute，z-index以及一些left或right内容也能做到这一点吗？或者我是否必须使用一些jscript / jQuery东西？

这是我的bootply：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

使用第二个＆＃34; .contentbox＆＃34; -div以及一些助手类和jQuery点击事件，我选择淡化内容框本身上方的读取文本。

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"); 
    });

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

1 个答案: