html - 悬停时 Bootstrap 容器弹出窗口

Question

我有一行包含 3 个 block (col-md-4)，悬停时需要“弹出”(因此它的边缘将与父容器重叠)。我已经摆弄了一下，但无法在仍然使用 Bootstrap 标准类的同时弄清楚如何做到这一点。

关于如何做到这一点有什么想法吗？不幸的是，谷歌在搜索“popout containers”时并没有提供很多信息:)

更喜欢用 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 中查看更多示例..