إظهار وإخفاء ابن من خلال استخدام محدد الوصول pseudo-classes hover في CSS / HTML

كنت اريد عندما يذهب المؤشر عل الصوره في section.team تظهر الكلام والجمل حيث اعطيته الكلاس شفافيه بصفر 

وعند الذهاب للصوره يظهر الكلام عل الصور فقمت بكتابه

        <section class="team" id="team">
            <div class="team-text text-center">
                <h5>OUR AWESOME TEAM</h5>
                <p>Seamlessly restore client-focused potentialities rather than functional strategic theme areas.
                    Credibly e-enable value-added portals with clicks-and-mortar initiatives.</p>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <img src="images/team/m1.jpg" alt="">
                        <div class="overlay text-center">
                            <div class="img-text">
                                <h5>MARTIN CAMBRIGE</h5>
                                <h4>Head Support</h4>
                                <p>We’ll etch your brand onto tangible objects: business cards, ads, stickers,
                                    brochures,
                                    you name it. You won’t see business cards, ads, stickers, brochures anything until
                                    we’re
                                    done drooling at the result.</p>
                            </div>

ولكن لم يعمل فما السبب

اقتباس

قمت بارفاق الصور المراده والملفات

section.team img:hover .overlay {
  opacity: 1;
}

salient.zip