Question

我的行中有3个块（col-md-4），在悬停时需要“弹出”（因此它的边缘将与父容器重叠）。我已经摆弄了一些但是在使用bootstrap标准类的时候无法弄清楚如何做到这一点。

关于如何做到这一点的任何想法？不幸的是，Google在搜索“弹出式容器”时并没有提供很多东西：）

宁愿在CSS

中这样做

HTML：

 <section class='container-fluid whitebg center-align' id='whyus'>
        <div class="container">
            <div class="row">
                <div class="col-md-4 whyusblock">
                    <img src="/img/icons/highestgrade.png" />
                    <h4>LEADING INDUSTRY</h4>
                    <p>Our professional-grade tools, resins, and equipment are preferred by windshield repair and headlight restoration technicians and are respected for quality, durability, and ease of use.</p>
                </div>
                <div class="col-md-4 whyusblock">
                    <img src="/img/icons/highestgrade.png" />
                    <h4>QUALITY GUARANTEED</h4>
                    <p>Our windshield repair and headlight restoration products are used by technicians all around South Africa. Every systems comes with a 100% quality guarantee that won’t let you down.</p>
                </div>
                 <div class="col-md-4 whyusblock">
                     <img src="/img/icons/highestgrade.png" />
                    <h4>PROFESSIONAL TRAINING</h4>
                    <p>We provide free professional training with all our windshield repair and headlight restoration products, so you know you provide the best possible repair and restoration service.</p>
                </div>
            </div>
        </div>
    </section>

CSS：

 #whyus {
     background: #f7f7f7;
 }

 .whyusblock {

  }

   .whyusblock:hover {
       background: #fff;
       -webkit-box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.67);
       -moz-box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.67);
       box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.67);
 }

Answer 1

使用以下内容检查此example

transition: all .2s ease-in-out;

这将让您了解如何修复代码。您还可以在here ..

中查看更多示例

悬停时Bootstrap容器弹出窗口

1 个答案: