I'm trying to create a row with 3 blocks (col-md-4) that will "popout" on hover, overlapping the parent container. I've been experimenting but can't quite achieve it while sticking to Bootstrap classes.
Any suggestions for how to accomplish this effect? Google hasn't been very helpful when searching for "popout containers" :)
I'd prefer to do it using CSS.
https://i.sstatic.net/KMtDW.jpg
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);
}