Change div size by hovering the mouse

Question

I have a page with some Divs and would like to apply an effect when the mouse goes through some of them. What I would like to happen is that, when passing the mouse through one of the Ivs it increases in size, almost as if it were "approaching" the user’s screen and that, appeared the "Click to know more" button, which is visible at all times, but stay hidden and appear only when the mouse goes through the div.

.bloco-programas{
    border: 1px solid #c1c1c1;
    padding: 2em 2em;
}

.content-programas{
    background-color: #003366;
    padding-top: 50px;
    padding-bottom: 50px;
    color: #dcdcdc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="content-programas" id="programas">
    <div class="container-fluid">
        <h1 class="text-center">Minhas DIVs</h1>
        <div class="row">
            <div class="col text-center bloco-programas">
                <p>Minha div</p>
                <p>Qualquer Coisa aqui</p>
                <a href="#" class="btn btn-primary">Clique para saber mais</a>
            </div>
            <div class="col text-center bloco-programas">
                <p>Minha div</p>
                <p>Qualquer Coisa aqui</p>
                <a href="#" class="btn btn-primary">Clique para saber mais</a>
            </div>
        </div>
        <div class="row">
            <div class="col text-center bloco-programas">
                <p>Minha div</p>
                <p>Qualquer Coisa aqui</p>
                <a href="#" class="btn btn-primary">Clique para saber mais</a>
            </div>
            <div class="col text-center bloco-programas">
                <p>Minha div</p>
                <p>Qualquer Coisa aqui</p>
                <a href="#" class="btn btn-primary">Clique para saber mais</a>
            </div>
        </div>
    </div>
</section>

Answer 1

You can achieve this result with CSS through attributes transition and transform, remember to add the redundancies with the prefaces -webkit-,-ms- and -moz- in order to find compatibility with other browsers

.content-programas{
  background-color: #003366;
  padding-top: 50px;
  padding-bottom: 50px;
  color: #dcdcdc;  
}

.bloco-programas {
  border: 1px solid #c1c1c1;
  padding: 2em 2em;
  background-color: #003366;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1); 
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1); 
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1); 
}

.bloco-programas a{
  display: none;
  
 
}

.bloco-programas:hover{
  box-shadow: 0px 0px 90px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.1);   
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.1);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

.bloco-programas:hover a{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="content-programas" id="programas">
    <div class="container-fluid">
        <h1 class="text-center">Minhas DIVs</h1>
        <div class="row">
            <div class="col text-center bloco-programas">
                <p>Minha div</p>
                <p>Qualquer Coisa aqui</p>
                <a href="#" class="btn btn-primary">Clique para saber mais</a>
            </div>
            <div class="col text-center bloco-programas">
                <p>Minha div</p>
                <p>Qualquer Coisa aqui</p>
                <a href="#" class="btn btn-primary">Clique para saber mais</a>
            </div>
        </div>
        <div class="row">
            <div class="col text-center bloco-programas">
                <p>Minha div</p>
                <p>Qualquer Coisa aqui</p>
                <a href="#" class="btn btn-primary">Clique para saber mais</a>
            </div>
            <div class="col text-center bloco-programas">
                <p>Minha div</p>
                <p>Qualquer Coisa aqui</p>
                <a href="#" class="btn btn-primary">Clique para saber mais</a>
            </div>
        </div>
    </div>
</section>

Answer 2

You can do all this with css.

Below is an example I made:

<div class="container">
   <div class="bloco">
      <div class="botao">
        <a href="">Saiba Mais</a>
      </div>
   </div>
</div>

.container {
  width: 400px;
  height: 200px;
  background: red;
  padding: 10px; 10px;
}

.container .bloco {
  width: 50%;
  height: 100px;
  margin-top: 15%;
  margin-left: 25%;
  background: yellow;
  position: relative;
  transition: 0.2s linear;
}

.container .bloco .botao{
  opacity: 0;
  transition: 0.2s linear;
}

.container .bloco .botao a {
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background: green;
  padding: 5px 10px;
  color: #fff;
  border-radius: 5px;
}

.container .bloco:hover {
  margin-left: 0;
  margin-top: 0;
  height: 200px;
  width: 400px;
}

.container .bloco:hover .botao {
  opacity: 1;
}

You can check here -> https://jsfiddle.net/dm1ogz48/