Efeito zoom In zoom Out com Css

Efeito zoom In zoom Out com Css – Tema a Crepúsculo

Neste artigo eu vou amostra como fazer um efeito com transform: scale(1) com css, ou seja um efeito zoom in zoom out.

A função de scale no CSS é definida como uma propriedade de Transformação CSS que permite redimensionar um elemento no Plano Bidimensional.

É usado para aumentar ou diminuir o tamanho de um elemento. Quando uma transformação de escala é aplicada é necessário instruir o navegador sobre os números a serem redimensionados.

Veja no Exemplo abaixo no Css

OBS: Reparem que a cor das bordas estar de acordo com as fotos que usei.

vocês também podem mudar e adaptar a cor das bordas de acordo com as fotos a serem utilizadas.

Vamos adicionar o Html:

<!--Html Zoom In-->
<div class="box-zoom-in">
    <a href="#"><img src="uploads/1.jpg" class="zoom-in" alt="" title="A Saga Crepúsculo"></a>
</div>

<div class="box-zoom-in">
    <a href="#"><img src="uploads/2.jpg" class="zoom-in" alt="" title="A Saga Crepúsculo"></a>
</div>

<div class="box-zoom-in">
    <a href="#"><img src="uploads/3.jpg" class="zoom-in" alt="" title="A Saga Crepúsculo"></a>
</div>


<!--Html Zoom Out-->
<div class="box-zoom-out">
    <a href="#"><img src="uploads/4.jpg" class="zoom-out" alt="" title="A Saga Crepúsculo"></a>
</div>

<div class="box-zoom-out">
    <a href="#"><img src="uploads/5.jpg" class="zoom-out" alt="" title="A Saga Crepúsculo"></a>
</div>

<div class="box-zoom-out">
    <a href="#"><img src="uploads/6.jpg" class="zoom-out" alt="" title="A Saga Crepúsculo"></a>
</div>

Vamos adicinar o Css:

/*Efeito Zoom*/
.box-zoom-in {

    overflow:hidden; 
    width:100%; 
    height:auto; 
    margin-bottom:20px; 
    float:left; 
    border-radius:6px; 
    border:4px #242424 solid;
    transition-duration:800ms;
}

.box-zoom-in:hover { 

    border:4px #9f7e4b solid; 
    transition-duration:800ms; }

.zoom-in {
  /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1); /*tamanho Normal da imagem*/
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}

.zoom-in:hover {
  /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.2); /*Esta é a escala de tamanho ampliada da imagem.*/
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2);
  -moz-transition-duration: 800ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.2);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}

/*outro*/

.box-zoom-out {

    overflow:hidden; 
    width:100%; 
    height:auto; 
    margin-bottom:20px; 
    float:left; 
    border-radius:6px; 
    border:4px #ae2109 solid;
    transition-duration:800ms;

}

.box-zoom-out:hover {

    border:4px #242424 solid;
    transition-duration:800ms;

}

.zoom-out {
  /* Webkit for Chrome and Safari */

  -webkit-transform: scale(1.2); /*tamanho normal da imagem*/
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.2);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}

.zoom-out:hover {
  /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1); /*Esta é a escala de tamanho ampliada da imagem.*/
  -webkit-transition-duration: 600ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1);
  -moz-transition-duration: 600ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1);
  -ms-transition-duration: 600ms;
  -ms-transition-timing-function: ease-out;
}
/*Efeito Zoom*/

Veja o Resultado !

Baixar Código Veja Funcionando