Change div size when mouseover

Navigation
0

I have a page with some DIVs and I would like to apply an effect when the mouse goes through some of them. What I would like to happen is that by hovering over any of the divs it would increase in size, almost as if it were "approaching" the user's screen and that the "Click to learn more" button appears, which is visible at all times, but hiding and appearing only when the mouse passes 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><scriptsrc="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><linkhref="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><sectionclass="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>
    
asked by anonymous 15.01.2018 / 23:41

2 answers

2

You can achieve this result with CSS through the transition and transform attributes, remember to add redundancies with -webkit- , -ms- and -moz- prefixes in order to seek 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><scriptsrc="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><linkhref="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><sectionclass="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>
    
16.01.2018 / 00:10
-1

You can do all this with css.

Below is an example that I did: 

<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 - > link

    
16.01.2018 / 00:05
R: how to transform only the year (four digit) into a date frame? Javascript for validation