sample-vscode-playground

index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class=col-sm-12>
            <div class="card market-ad"
                style="background-image: url(&quot;https://source.unsplash.com/random/472x269&quot;); background-color: rgba(0, 0, 0, 0.5);">
                <div class="card-body p-2">
                    <p class="text-white mb-0">Type a message!</p>
                    <p class="text-light mb-0 font-weight-light">It will show up here.</p>
                </div>
                <div class="content p-2" style="background-image: url(&quot;https://source.unsplash.com/random/472x269&quot;);">
                    <p class="text-white mb-0">Type a message!</p>
                    <p class="text-light mb-0 font-weight-light">It will show up here.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">&nbsp;</div>
</div>

playground.json

{
  "libraries": ["bootstrap","angular"]
}

script.js

var angular = "react";

style.css

.market-ad{
    display: block;
    width: 100%;
    padding-top: 56.99152542%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
    box-shadow: none;
    overflow: hidden;
    z-index: 98;
    background-image: url(/assets/static/market_ad_3.png);
    background-color: rgba(0, 0, 0, 0.5);
}

.market-ad .card-body {
    position: absolute;
    bottom: 0;
    width: 100% !important;
    padding: 0;
    background-position: bottom !important;
    background-size: cover !important;
    z-index: 299;
    background-color: rgba(0, 0, 0, 0.4) !important;
}
.market-ad .content {
    background-color: white;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-filter: blur(3.5px) !important;
    -ms-filter: blur(3.5px) !important;
    -moz-filter: blur(3.5px) !important;
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3.5');
    position: absolute;
    bottom: 0px;
    width: 100% !important;
    background-position: bottom !important;
    background-size: cover !important;
    z-index: 199;
}