ativar um componente clicando em outro

[roneyword]

boa tarde,

gostaria de saber como ativo um campo, clicando ou passando o mouse em cima de outro.

<div class="col-xs-12 col-md-3">
                    <div class="card border-0 sombra-h" id="mydiv">
                        <img class="card-img-top img-fluid" src="img/cidade4.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title"><strong>Los Angeles</strong></h5>
                            <p class="card-text">sexta-feira 30 junho, 2018</p>
                            <button class="btn btn-primary" id="vibrar"><i class="fas fa-shopping-cart"></i> comprar</button>
                        </div>
                    </div>
                </div>

gostaria que quando entrasse nessa minha div (id="mydiv") o botão iria fazer uma animação.

 

minha classe css (estilo.css)

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

 

[lowys]

E em qual elemento  html o sr. declarou a class hvr-grow ?