<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>

Как добавить такую тень при hover, ведь она добавляется ко всему блоку div
Вот так получится если к блоку добавить