I am attempting to implement an interesting effect on my website where clicking a thumbnail causes a full-size div to "zoom in" from the thumbnail. My initial strategy involved using CSS and jQuery, setting the full-size div to position:absolute with top and left coordinates matching those of the clicked thumbnail. I planned to set the zoom property to a low value like .25 and then use jQuery's animate function to gradually increase the zoom value to 1 while moving the div to its final position. However, this approach did not work as expected because the zoom affected both the size and positioning of the div.
Therefore, my question is simple: how can I accurately position the "full-size" div based on the thumbnail while maintaining a zoom value less than 1?
Edit 1: After conducting further research, I learned that Firefox does not support the zoom property at all. Additionally, the behavior across different browsers was inconsistent. As a result, I decided to switch to using CSS transformations and transitions instead. Although the transition property may not be compatible with IE<10, I found it to be a more reliable solution compared to dealing with cross-browser inconsistencies.