How to add such shadow to a block in Bootstrap?

Question

css

<div class="models pt-5 container">
        <div class="row">
            <div class="d-flex justify-content-center col-xl-4 col-md-4 col-cm-12">
                <div class="text-center ">
                    <img class="img-fluid" src="img/iPhone.png" alt="iPhone">
                    <p class="pt-4">iPhone</p>
                </div>
            </div>
            <div class="d-flex justify-content-center col-xl-4 col-md-4 col-cm-12">
                <div class="text-center">
                    <img class="img-fluid" src="img/iPad.png" alt="iPad">
                    <p class="pt-4">iPad</p>
                </div>
            </div>
            <div class="d-flex justify-content-center col-xl-4 col-md-4 col-cm-12">
                <div class="text-center ">
                    <img class="img-fluid" src="img/macbook1.png" alt="macbook1">
                    <p class="pt-4">MacBook</p>
                </div>
            </div>
        </div>
    </div>

How to add such a shadow on hover, because it is added to the entire div block
This is how it will turn out if you add to the block

Answer 1

.d-flex:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

The width parameter is responsible for the width

Answer 2

Just choose which one you like https://madeas.github.io/box-shadows/ or write your own styles

Answer 3

Set the correct block size.
PS Use the developer panel in the browser (usually f12 or right-click on the block-> view element code) is a super handy thing! Hover over your elements and the browser will tell you everything (highlights the borders, paddings and block sizes with different colors) and also shows what styles are applied to the element and makes it possible to change them dynamically on the fly and see the result.
Well, look at your block from the browser and decide what you need:
Resize this block or wrap its content in another block and resize it already.