Circular Images in cards, class added but no change

Question

i'm trying to make a website that display a team, each member inside a card, but the project need the profile photo to be a circle, i've tried to add the class "circle" to the image but it doenst work...

checklist of what i've tried: - adding circle class to the img - No Sucess
- adding a custom Style with border-radius 50%; - No Sucess
- adding circle class to the card-image div - No Sucess

my code:

<div class="row">
        <div class="col s12 l4">
            <div class="card">
                <div class="card-image">
                    <img src="images/marcelo.jpg" alt="Foto do Fundador da Empresa,Marcelo Borges Fagundes" >
                </div>
                <div class="card-content">
                    <span class="card-title">Marcelo Borges Fagundes</span>
                    <p>Fundador da Empresa</p>
                </div>
            </div>
        </div>

        <div class="col s12 l4">
                <div class="card">
                    <div class="card-image">
                        <img src="images/thiago.jpg" alt="Foto do Funcionario da empresa,Thiago Zaleski Leon"  class="circle">
                    </div>
                    <div class="card-content">
                        <span class="card-title">Thiago Zaleski</span>
                        <p>Auxiliar de Informática</p>
                    </div>
                </div>
            </div>

    </div>

The card still show as a rectangular image :( any ideias how to outcome this?

Answer 1

.card-image {
  border-radius: 50%;
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<div class="row">
        <div class="col s12 l4">
            <div class="card">
                <div class="card-image">
                    <img src="https://via.placeholder.com/50x50" alt="Foto do Fundador da Empresa,Marcelo Borges Fagundes" >
                </div>
                <div class="card-content">
                    <span class="card-title">Marcelo Borges Fagundes</span>
                    <p>Fundador da Empresa</p>
                </div>
            </div>
        </div>

        <div class="col s12 l4">
                <div class="card">
                    <div class="card-image">
                        <img src="https://via.placeholder.com/50x50" alt="Foto do Funcionario da empresa,Thiago Zaleski Leon"  class="circle">
                    </div>
                    <div class="card-content">
                        <span class="card-title">Thiago Zaleski</span>
                        <p>Auxiliar de Informática</p>
                    </div>
                </div>
            </div>

    </div>