{"id":249219,"date":"2016-12-22T14:29:16","date_gmt":"2016-12-22T21:29:16","guid":{"rendered":"http:\/\/css-tricks.com\/?p=249219"},"modified":"2016-12-22T14:29:56","modified_gmt":"2016-12-22T21:29:56","slug":"zooming","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/zooming\/","title":{"rendered":"Zooming"},"content":{"rendered":"

Check out this nice image-zooming library<\/a> by Desmond Ding. It’s fairly little, has no dependencies, and has all the modern stuff to make it easy to integrate into modern sites (you know, available on npm, and modulized). I tossed a demo up on CodePen for playing convenience:<\/p>\n

See the Pen Zooming<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n

<\/p>\n

When I said “fairly little” there, the minified version is still 7K. Check out Dave Rupert’s take where it’s all done with some transitions and viewport units<\/a>. That’s just a few bytes of code!<\/p>\n

See the Pen Experiment: Using Picture Element and VW+VH units as a Lightbox<\/a> by Dave Rupert (@davatron5000<\/a>) on CodePen<\/a>.<\/p>\n

Ahhhhh the power of changing classes<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"

Check out this nice image-zooming library by Desmond Ding. It’s fairly little, has no dependencies, and has all the modern stuff to make it easy to integrate into modern sites (you know, available on npm, and modulized). I tossed a demo up on CodePen for playing convenience: See the Pen Zooming by Chris Coyier (@chriscoyier) […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[431,981,982],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":244353,"url":"https:\/\/css-tricks.com\/zooming-background-images\/","url_meta":{"origin":249219,"position":0},"title":"Zooming Background Images","date":"August 10, 2016","format":false,"excerpt":"The following is a guest post by Dylan Winn-Brown, who shows us a performant way to accomplish this design effect. Whilst working on a client\u2019s website recently, I was asked to replicate an effect like this. Containers with background images which zoom within their container on hover, revealing more information.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19872,"url":"https:\/\/css-tricks.com\/zooming-squishes\/","url_meta":{"origin":249219,"position":1},"title":"Zooming Squishes","date":"January 16, 2013","format":false,"excerpt":"Responsive designs can squish content inward when zooming, breaking a decent layout after just a few zooms. One reader writes in who really dislikes this on CSS-Tricks. But it's (mostly) fixable! Just make those media queries EM-based instead of pixel-based.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":296435,"url":"https:\/\/css-tricks.com\/clipping-clipping-and-more-clipping\/","url_meta":{"origin":249219,"position":2},"title":"Clipping, Clipping, and More Clipping!","date":"October 8, 2019","format":false,"excerpt":"There are so many things you can do with clipping paths. I've been exploring them for quite some time and have come up with different techniques and use cases for them \u2014 and I want to share my findings with you! I hope this will spark new ideas for fun\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/scissors-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":198488,"url":"https:\/\/css-tricks.com\/probably-use-initial-scale1\/","url_meta":{"origin":249219,"position":3},"title":"Probably Use initial-scale=1","date":"March 18, 2015","format":false,"excerpt":"If you're doing responsive design, you're using viewport tags. These tell the browser what width it should render the viewport at. If you don't use this tag, it will render at the device's default, which almost certainly isn't what you want. But even if you are using viewport , there\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250623,"url":"https:\/\/css-tricks.com\/align-svg-icons-text-say-goodbye-font-icons\/","url_meta":{"origin":249219,"position":4},"title":"Align SVG Icons to Text and Say Goodbye to Font Icons","date":"January 28, 2017","format":false,"excerpt":"Elliot Dahl: At Pivotal we've created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use. Alignment and icons (of any sort) will probably always\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":363498,"url":"https:\/\/css-tricks.com\/your-css-reset-needs-text-size-adjust-probably\/","url_meta":{"origin":249219,"position":5},"title":"Your CSS reset needs text-size-adjust (probably)","date":"February 11, 2022","format":false,"excerpt":"Kilian Valkhof: [...] Mobile Safari increases the default font-size when you switch a website from portrait to landscape. On phones that is, it doesn\u2019t do it on iPad. Safari has been doing this for a long time, as a way to improve readability on non-mobile optimized websites. While undoubtedly useful\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/code-magnify.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/249219"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=249219"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/249219\/revisions"}],"predecessor-version":[{"id":249222,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/249219\/revisions\/249222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=249219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=249219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=249219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}