<div class="container">
    
    <div class="row row-cols-1 row-cols-md-3 g-5 mt-5">
        <div class="col">
            <div class="card align-items-center rounded-5 BenimShadow" style="background-size: cover;">
                <div class="card-body text-center text-white ">
                    <figure class="figure">
                        <img src="resimler/2murat.jpg" class="figure-img img-fluid rounded-circle shadow" style="height: 280px; width: 300px;">
                    </figure>
                    <h3 style="font-family: jost;" class="text-uppercase">Sultan II. Murad</h3>
                    <p>1421'den 1444'e ve 1446'dan 1451'e kadar iki kez Osmanlı İmparatorluğun'u yönetti. </p>
                    <i class="fa-brands fa-square-instagram text-danger"></i>
                    <i class="fa-brands fa-facebook"></i>
                    <<i class="bi bi-facebook"></i> //>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card align-items-center rounded-5 BenimShadow" style="background-size: cover;">
                <div class="card-body text-center  text-white">
                    <figure class="figure">
                        <img src="resimler/2murat.jpg" class="figure-img img-fluid rounded-circle shadow" style="height: 280px; width: 300px;">
                    </figure>
                    <h3 style="font-family: jost;" class="text-uppercase">Sultan II. Murad</h3>
                    <p>1421'den 1444'e ve 1446'dan 1451'e kadar iki kez Osmanlı İmparatorluğu'nu yönetti. </p>
                    <i class="fa-brands fa-square-instagram text-danger"></i>
                    <i class="fa-brands fa-facebook"></i>
                    <<i class="bi bi-facebook"></i>>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card align-items-center rounded-5 BenimShadow" style="background-size: cover;">
                <div class="card-body text-center">
                    <figure class="figure">
                        <img src="resimler/2murat.jpg" class="figure-img img-fluid rounded-circle shadow" style="height: 280px; width: 300px;">
                    </figure>
                    <h3 style="font-family: jost;" class="text-uppercase">Sultan II. Murad</h3>
                    <p>1421'den 1444'e ve 1446'dan 1451'e kadar iki kez Osmanlı İmparatorluğu'nu yönetti. </p>
                    <i class="fa-brands fa-square-instagram text-danger"></i>
                    <i class="fa-brands fa-facebook"></i>
                    <<i class="bi bi-facebook"></i>>
                </div>
            </div>
        </div>
    </div>
</div>




<script src="bootstrap-5.3.5-dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>

<script>
    document.querySelectorAll(".card").forEach(Secilen => {
        Secilen.addEventListener('mouseenter', ()=>{
           Secilen.style.backgroundSize='auto';
        });
        
        Secilen.addEventListener('mouseleave', ()=>{
           Secilen.style.backgroundSize='cover';
        });
    });
</script>