zoom in/out button of a div

Asked

Viewed 1,680 times

0

They know some way with jquery and/or css to simulate the zoom in/out effect of a div. Div does not necessarily have an image. Without the increase/decrease div, simulate this effect for the elements that are contained in it ? Basically increase and decrease the scale of objects.

Thank you ;)

jquery html css web-application

  • is a Gram in primefaces

1 answer

1

You can with css use the tranform to increase the size of the elements. I don’t know if this is exactly what you want more is a way to "zoom" into elements in 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>

  • I can get a button off the div to do that ? How can I force as a result of a button add a css effect on elements of a div outside ?

  • Yes! Can with javascript. Something like $('.button').click(function(){$('.element').toggleClass('zoom')}); and in the zoom class is the Transform .zoom{transform:scale(2);}

Browser other questions tagged jquery html css web-application

You are not signed in. Login or sign up in order to post.