Javascript 如何在悬停-flexbox布局上滑出内容

我有一个漂亮的小登录页，上面有大图片和小标题框

如果将鼠标悬停在标题上方，则其周围的框应滑出（变宽，但不应将图片推开，而是应位于图片上方）旁边的图片并在那里显示一些文本。这一切都是在flexbox引导布局中完成的

position:absolute

、

z-index

和一些

left

或

right

的东西即使在flexbox内容中也能做到这一点吗？或者我必须使用一些jscript/jQuery的东西吗

这是我的靴子：

以及更大利益的准则：

<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 -->

使用第二个“.contentbox”-div和一些助手类以及jQuery click事件，我选择将contentbox中的readmore文本淡入居中标题上方

html:

文档中的js就绪：

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

使用第二个“.contentbox”-div和一些助手类以及jQuery click事件，我选择将contentbox中的readmore文本淡入居中标题上方

html:

文档中的js就绪：

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

---

寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码。虽然您提供了一个示例的链接，但如果该链接无效，您的问题将对其他具有相同问题的未来用户没有任何价值。寻求代码帮助的问题必须包含在问题本身中重现该问题所需的最短代码。虽然您提供了一个示例的链接，但如果该链接无效，您的问题对其他具有相同问题的未来SO用户将毫无价值。

.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;
    }

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