CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ibrewster
ibrewster

Reputation: 3612

CSS zoom w/absolute position

I am trying to create an effect on my webpage where you click a thumbnail, and a full-size div "zooms in" from the thumbnail. I thought it should be fairly straight forward using CSS/Jquery: simply set the div to position:absolute with top and left set to match the thumbnail clicked on, set the zoom property to an appropriate low value (such as .25), and use the query animate function to animate the zoom value to 1 and the top/left values to where I want the final image. This almost worked, with one caveat: Apparently the zoom CSS zoomed not only the size of the div (and it's contents), it also zoomed the position.

So my question is (relatively) simple: how can I position the "full size" div with top and left matched to the thumbnail and the zoom parameter set to less than 1?

Edit 1: After further research, I discovered that apparently Firefox doesn't support the zoom property at all, and the behavior I was getting in other browsers was simply too inconsistent, so I switched over to using CSS transformations/transitions instead. Granted, the transition property doesn't work on IE<10, but then neither does lots of other stuff, so I can live with that.

Upvotes: 2

Views: 3181

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

That is unexpected behavior. An alternative is to put the zoomed element within another element, which has the absolute-position styling:

$('#content div').animate({
  zoom: 0.2
},2000);
#content {
  position: fixed;
  top: 50px;
  left: 50px;
  border: 1px solid black;
  background: #88e;
  font: 60px verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div>Lorem ipsum</div>
</di>

Upvotes: 2

Related Questions