{"id":25247,"date":"2017-12-14T09:29:00","date_gmt":"2017-12-13T23:29:00","guid":{"rendered":"https:\/\/codemyui.com\/?p=25247"},"modified":"2019-09-13T11:24:54","modified_gmt":"2019-09-13T01:24:54","slug":"pure-css-ken-burns-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/pure-css-ken-burns-effect\/","title":{"rendered":"Pure CSS Ken Burns Effect"},"content":{"rendered":"<p>A nice little <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">CSS only<\/a> <a href=\"https:\/\/codemyui.com\/tag\/ken-burns\/\">Ken Burns effect<\/a> for <a href=\"https:\/\/codemyui.com\/tag\/slider\/\">image sliders<\/a> designed by Dima. When the image loads it rotates anti-clockwise while zooming out giving the image a really fancy <a href=\"https:\/\/codemyui.com\/tag\/image-effects\/\">image effect<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/73d9d7d16dcc495f35e0b1257652de5f\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a><\/p>\n<h2>Pure CSS Ken Burns Snippet<\/h2>\n<p class='codepen'  data-height='521' data-theme-id='0' data-slug-hash='rLxrXZ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Ken Burns effect CSS only by Dima (@dimaZubkov) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A nice little CSS only Ken Burns effect for image sliders designed by Dima. When the image loads it rotates anti-clockwise while zooming out giving the image a really fancy image effect.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/pure-css-ken-burns-effect\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":25249,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[1745484,268522,105368,30305495,608602285],"class_list":["post-25247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-effects","tag-image-slider","tag-ken-burns-effect","tag-pure-css","tag-zoom","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-ken-burns-effect.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":5405,"url":"https:\/\/codemyui.com\/css-ken-burns-effect\/","url_meta":{"origin":25247,"position":0},"title":"CSS Only Ken Burns Effect","author":"Hima Vincent","date":"January 30, 2017","format":false,"excerpt":"The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery, popularised by American documentarian Ken Burns. We have seen this effect in web design for a while now and with this snippet, by Hugo B\u00f6rjesson we see this effect created with\u2026","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"CSS Only Ken Burns Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/css-only-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/css-only-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/css-only-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/css-only-ken-burns-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24628,"url":"https:\/\/codemyui.com\/image-grid-kenburns-description-hover\/","url_meta":{"origin":25247,"position":1},"title":"Image Grid with KenBurns and Description on Hover","author":"Hima Vincent","date":"September 23, 2019","format":false,"excerpt":"This Pure CSS image gallery was designed by Giana, it offers direction aware hover effect by bringing up the description associated with each image and a ken burns effect for the background image. If you are having trouble with the pen, try the archived copy on GitHub Image Grid Snippet","rel":"","context":"In \"direction aware\"","block_context":{"text":"direction aware","link":"https:\/\/codemyui.com\/tag\/direction-aware\/"},"img":{"alt_text":"Image Grid with KenBurns and Description on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":20146,"url":"https:\/\/codemyui.com\/looking-dirty-window-image-effect\/","url_meta":{"origin":25247,"position":2},"title":"Looking Through a Dirty Window Image Effect","author":"Hima Vincent","date":"September 19, 2019","format":false,"excerpt":"This Ken Burns image effect of looking through a dirty glass was inspired by the opening credits of The Walking Dead. Thanks to this CSS snippet designed by Chris Smith you can recreate that effect on your website. If you are having trouble with the pen, try the archived copy\u2026","rel":"","context":"In \"deconstruction\"","block_context":{"text":"deconstruction","link":"https:\/\/codemyui.com\/tag\/deconstruction\/"},"img":{"alt_text":"Looking Through a Dirty Window Image Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/looking-through-a-dirty-window-image-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/looking-through-a-dirty-window-image-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/looking-through-a-dirty-window-image-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/looking-through-a-dirty-window-image-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":5444,"url":"https:\/\/codemyui.com\/top-left-bottom-right-ken-burns\/","url_meta":{"origin":25247,"position":3},"title":"Top Left to Bottom Right Ken Burns","author":"Hima Vincent","date":"January 30, 2017","format":false,"excerpt":"If you want to add the Ken Burns effect to an image then snippet will help you do that. You will see that the view pans from the top left to the bottom right and then back, it was designed by Michael McMillan. If you are having trouble with the\u2026","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"Top Left to Bottom Right Ken Burns","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/top-left-to-bottom-right-ken-burns.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/top-left-to-bottom-right-ken-burns.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/top-left-to-bottom-right-ken-burns.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/top-left-to-bottom-right-ken-burns.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27038,"url":"https:\/\/codemyui.com\/css-only-vertical-image-slider-with-thumbnails\/","url_meta":{"origin":25247,"position":4},"title":"CSS Only Vertical Image Slider with Thumbnails","author":"Saijo George","date":"January 9, 2019","format":false,"excerpt":"In this CSS only snippet you have a vertical image slider with thumbnails on the right, you can click on an image thumbnail and jump to that image in the slider. Designed by Chen Hui Jing. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"image slider\"","block_context":{"text":"image slider","link":"https:\/\/codemyui.com\/tag\/image-slider\/"},"img":{"alt_text":"CSS Only Vertical Image Slider with Thumbnails","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/CSS-Only-Vertical-Image-Slider-with-Thumbnails.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/CSS-Only-Vertical-Image-Slider-with-Thumbnails.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/CSS-Only-Vertical-Image-Slider-with-Thumbnails.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/CSS-Only-Vertical-Image-Slider-with-Thumbnails.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29251,"url":"https:\/\/codemyui.com\/css-only-content-slider\/","url_meta":{"origin":25247,"position":5},"title":"CSS Only Content Slider","author":"Saijo George","date":"January 15, 2020","format":false,"excerpt":"This is a content carousel in pure CSS, it has the left and right arrows to move between the various slides and a pagination style element below that you can use to jump to any specific slide. By Christian Schaefer. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"image slider\"","block_context":{"text":"image slider","link":"https:\/\/codemyui.com\/tag\/image-slider\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Content-Slider.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Content-Slider.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Content-Slider.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Content-Slider.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=25247"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25247\/revisions"}],"predecessor-version":[{"id":28052,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25247\/revisions\/28052"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25249"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}