Simple grid that pops when hovering....

Bootstrap Studio Help
1

I need some help, I found this code, and I'm trying to clean it up, and recreate it in Bootstrap Studio... I want to understand how to make this, but I'm stumped.

Can anyone help?

Here is the code I found:

    <section class="band-9 band-wrapper band-md"><div class="container"><div class="col-xs-12 single-column"><div class="PageWidget" style=" padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;">
        <div class="boxContainer1NoFrameNoBorder"><div class="boxContainer2NoFrameNoBorder">
    <div class="MainWidgetWrapper CustomWidget">
                    <div class="boxHeaderContainer1 " style="">
                    <div class="boxHeaderContainer2" style="">
                        <div style="" class="h2 widget-title"> <div style="text-align:center"><p style="font-family:khula,sans-serif;font-size:38px;font-weight:700;line-height:48px;padding-top:15px"><span style="color:#018bb2">MEMBERSHIP BY THE </span><span style="color:#424242">NUMBERS</span></p></div></div>
                    </div>
                    </div>
                            <div class="WidgetNoBorder " style="">
              <div style="">
                    <div class="WidgetWrapper">

<div class="CustomWidgetBody">
    <div class="inlineEditor" contenteditable="false" id="bcw_99a61a6d-7201-4e90-a3bf-923dc276bf92" widgetId="e1309241-ea37-4c17-858c-1a18002a22a3" widgetDataId="99a61a6d-7201-4e90-a3bf-923dc276bf92" widgetName="MEMBERSHIP BY THE NUMBERS   " widgetSystemName="CustomWidget" title="" ckeditortoolbarsname="CkEditorToolBarLight">
        <div class="card-container card-pop">
<div class="card-col col-md-4 col-sm-6 col-xs-12" style="text-align:center">
<div class="card card-default">
<div class="card-block">
<div class="card-title" style="text-align:center">&nbsp;&nbsp;&nbsp;<!-- <em class="fa fa-id-card-o" style="color: rgb(1, 139, 178); font-size: 60px;">&nbsp;</em> --><br />
<strong><span style="font-size:48px;line-height:70px">160+</span></strong><br />
<span style="font-size:20px">Total Active Members</span></div>
</div>
</div>
</div>

<div class="card-col col-md-4 col-sm-6 col-xs-12" style="text-align:center">
<div class="card card-default">
<div class="card-block">
<div class="card-title" style="text-align:center">&nbsp;&nbsp;&nbsp;<!-- <em class="fa fa-female" style="color: rgb(1, 139, 178); font-size: 60px;">&nbsp;</em> --><br />
<strong><span style="font-size:48px;line-height:70px">33%</span></strong><br />
<span style="font-size:20px">Female Members</span></div>
</div>
</div>
</div>

<div class="card-col col-md-4 col-sm-6 col-xs-12" style="text-align:center">
<div class="card card-default">
<div class="card-block">
<div class="card-title" style="text-align:center">&nbsp;&nbsp;&nbsp;<!-- <em class="fa fa-male" style="color: rgb(1, 139, 178); font-size: 60px;">&nbsp;</em> --><br />
<strong><span style="font-size:48px;line-height:70px">67%</span></strong><br />
<span style="font-size:20px">Male Members</span></div>
</div>
</div>
</div>

<div class="card-col col-md-4 col-sm-6 col-xs-12" style="text-align:center">
<div class="card card-default">
<div class="card-block">
<div class="card-title" style="text-align:center">&nbsp;&nbsp;&nbsp;<!-- <em class="fa fa-briefcase" style="color: rgb(1, 139, 178); font-size: 60px;">&nbsp;</em> --><br />
<strong><span style="font-size:48px;line-height:70px">100+</span></strong><br />
<span style="font-size:20px">Professions</span></div>
</div>
</div>
</div>

<div class="card-col col-md-4 col-sm-6 col-xs-12" style="text-align:center">
<div class="card card-default">
<div class="card-block">
<div class="card-title" style="text-align:center">&nbsp;&nbsp;&nbsp;<!-- <em class="fa fa-user" style="color: rgb(1, 139, 178); font-size: 60px;">&nbsp;</em> --><br />
<strong><span style="font-size:48px;line-height:70px">16+</span></strong><br />
<span style="font-size:20px">Average Member Tenure<br />
(In Years)</span></div>
</div>
</div>
</div>

<div class="card-col col-md-4 col-sm-6 col-xs-12" style="text-align:center">
<div class="card card-default">
<div class="card-block">
<div class="card-title" style="text-align:center">&nbsp;&nbsp;&nbsp;<!-- <em class="fa fa-users" style="color: rgb(1, 139, 178); font-size: 60px;">&nbsp;</em> --><br />
<strong><span style="font-size:48px;line-height:70px">62.8</span></strong><br />
<span style="font-size:20px">Average Age</span></div>
</div>
</div>
</div>
</div>
2

A beautiful website made with BSS has been posted here (kudos to the author!) : http://www.kenepadesign.com/ price tables at the end of the page do a small pop effect using a :hover CSS property:

.pricing .card {
  border: none;
  border-radius: 1rem;
  transition: all .2s;
  box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .1);
}

@media (min-width:992px) {
  .pricing .card:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
    box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3)
  }
3

Thank you Marrco, this is awesome! Is it possible to achieve this without using CSS?

I'm trying to add the code to a widget box in ClubRunner, the code I posted works in the widget, but I don't think I can add CSS to the "source" section...

4

You can add CSS to HTML inline, or by using <style></style> It's not best practice, but it's a workaround for your situation.

(PS, there's an error in your posted HTML. You have an extra </div> at the end that isn't needed.)