0

Sabem alguma forma com jquery e/ou css simular o efeito zoom in/out de uma div. A div não têm necessáriamente uma imagem. Sem a div aumentar/dimuir, simular esse efeito para os elemento que estão contidos nela ? Basicamente aumentar e diminuir a scala dos objectos.

Obrigado ;)

1
  • é um diagram em primefaces 31/03/2016 às 10:22

1 Resposta 1

1

Você pode com css usar o tranform para aumentar o tamanho dos elementos. Não sei se é exatamente isso que você quer mais é uma forma de dar um "zoom" em elementos no html.

.element {
    transform: scale(2); /* aumenta 2x o tamanho */
}

.element{
  width: 100px;
  height: 100px;
  display:block;
  background:rgb(62,157,251);
  margin:100px auto;
  color:white;
  font-family:Arial;
  text-align:center;
  border-radius:5px;
  transition: all 0.5s;
}

.element:hover{
    transform:scale(2);
}
<div class="element">
</div>

2
  • Consigo por um botão fora da div a fazer esse efeito ? Como posso forçar em consequência de um botão acrescentar um efeito css em elementos de uma div fora ? 31/03/2016 às 10:47
  • Sim! Consegue com javascript. Algo como $('.button').click(function(){$('.element').toggleClass('zoom')}); e na classe zoom estar o transform .zoom{transform:scale(2);} 31/03/2016 às 15:14

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 .