0

Tenho uma página com algumas DIVs e gostaria de aplicar um efeito quando o mouse passar por alguma delas. O que eu gostaria que acontecesse é que, ao passar o mouse por alguma das divs ela aumentasse de tamanho, quase como se estivesse se "aproximando" da tela do usuário e que, aparecesse o botão "Clique para saber mais", que está visível a todo momento, mas ficasse escondido e aparecesse apenas quando o mouse passar pela 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>

2 Respostas 2

2

Você pode conseguir esse resultado com CSS através dos atributos transition e transform, lembre-se de adicionar as redundâncias com os prefíxos -webkit-,-ms- e -moz- com o intuito de buscar a compatibilidade com os outros 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>

2
  • Adicionei o hide do botão, partindo daí você pode ir brincando até alcançar o resultado que procura. Commented 15/01/2018 às 23:33
  • Muito obrigado, era exatamente isso que queria
    – Phelipe
    Commented 15/01/2018 às 23:34
-1

Você pode fazer tudo isso com css.

Abaixo tem um exemplo que eu fiz:

<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;
}

Você pode conferir aqui -> https://jsfiddle.net/dm1ogz48/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .