استخدام المحدد hover في css

تقصد أنك تريد أن تظهر الطبقة الزرقاء عندما يأتي المؤشر فقط على الصورة؟ اذا كنت تقصد ذلك فيمكننا فعل ذلك ببساطة من خلال استخدام المحدد hover لعنصر غير العنصر card , لاحظ الكود الذي كتبته أنت

.card:hover  .overlay{
    display: block;
}

يمكننا استخدام المحدد hover للحاوية الخاصة بالصورة , لاحظ

<div class="main-img" style="position: relative;">
     ^^^^^^^^^^^^^^^^^
   <img class="card-img-top " src="img/image-equilibrium.jpg" alt="Card image cap">

أعطيت الحاوية الصنف main-img والآن يمكننا استخدام المحدد hover عليه كالتالي

.card .main-img:hover  .overlay{
    display: block;
    
}