{"id":24628,"date":"2019-09-23T22:15:17","date_gmt":"2019-09-23T12:15:17","guid":{"rendered":"https:\/\/codemyui.com\/?p=24628"},"modified":"2019-09-23T22:49:16","modified_gmt":"2019-09-23T12:49:16","slug":"image-grid-kenburns-description-hover","status":"publish","type":"post","link":"https:\/\/codemyui.com\/image-grid-kenburns-description-hover\/","title":{"rendered":"Image Grid with KenBurns and Description on Hover"},"content":{"rendered":"<p>This <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">Pure CSS<\/a> <a href=\"https:\/\/codemyui.com\/tag\/image-gallery\/\">image gallery<\/a> was designed by <a rel=\"noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/gianablantin\">Giana<\/a>, it offers direction aware hover effect by bringing up the description associated with each <a href=\"https:\/\/codemyui.com\/tag\/image-effects\/\">image<\/a> and a <a href=\"https:\/\/codemyui.com\/tag\/ken-burns\/\">ken burns effect<\/a> for the background image.<\/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\/45cecbaee2838acdbb2e5c66e05ef659\" rel=\"noopener noreferrer\" target=\"_blank\">GitHub<\/a><\/p>\n<h2>Image Grid Snippet<\/h2>\n<p class='codepen'  data-height='686' data-theme-id='0' data-slug-hash='YZWjQy' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen CSS-only directionally aware hover by Giana (@giana) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/image-grid-kenburns-description-hover\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":24642,"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":false,"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":[608602278,5780130,192416248,1745484,81450,105368,30305495],"class_list":["post-24628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-direction-aware","tag-hidden-content","tag-hover-animation","tag-image-effects","tag-image-gallery","tag-ken-burns-effect","tag-pure-css","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"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","jetpack-related-posts":[{"id":24729,"url":"https:\/\/codemyui.com\/target-elements-based-position-hovered-element\/","url_meta":{"origin":24628,"position":0},"title":"Target Elements Based on their Position to a Hovered Element","author":"Hima Vincent","date":"September 19, 2017","format":false,"excerpt":"In this snippet Giana shows you how you can target elements based on their position to a hovered element using CSS sibling selector. If you are having trouble with the pen, try the archived copy on GitHub CSS Sibling Selector Snippet","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/css-sibling-selector-with-hover-state.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/css-sibling-selector-with-hover-state.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/css-sibling-selector-with-hover-state.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/css-sibling-selector-with-hover-state.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25337,"url":"https:\/\/codemyui.com\/buttons-trippy-background-animation-hover\/","url_meta":{"origin":24628,"position":1},"title":"Buttons with Trippy Background Animation on Hover","author":"Saijo George","date":"January 8, 2018","format":false,"excerpt":"These are pure CSS effects that add some trippy background animations to buttons on hover. From scatter lines to bubbles there are six different animations to choose from, it was designed by Giana. If you are having trouble with the pen, try the archived copy on GitHub Buttons Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Buttons with Trippy Background Animation on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/buttons-with-trippy-background-animation-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\/2018\/01\/buttons-with-trippy-background-animation-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/buttons-with-trippy-background-animation-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/buttons-with-trippy-background-animation-on-hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17860,"url":"https:\/\/codemyui.com\/simple-box-shadow-button-hover-animation\/","url_meta":{"origin":24628,"position":2},"title":"Simple box-shadow Button Hover Animation","author":"Hima Vincent","date":"June 16, 2017","format":false,"excerpt":"These set of button animation in Pure CSS using the box-shadow property was designed by Giana. There are six animation to choose from Fill In, Pulse, Close, Raise, Fill Up, Slide, Offset. Some of these will work well for CTA buttons on your landing page. If you are having trouble\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"box-shadow button hover animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/box-shadow-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/box-shadow-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/box-shadow-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/box-shadow-button-hover-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26683,"url":"https:\/\/codemyui.com\/button-border-and-text-color-fill-on-hover\/","url_meta":{"origin":24628,"position":3},"title":"Button Border and Text Color Fill On Hover","author":"Saijo George","date":"July 16, 2018","format":false,"excerpt":"With this CSS only snippet designed by Giana has a cool button animation when you hover over it, the colour of the text and border changes from the bottom right. If you are having trouble with the pen, try the archived copy on GitHub Button Color Change Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button Border and Text Color Fill On Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Button-Border-and-Text-Color-Fill-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\/2018\/07\/Button-Border-and-Text-Color-Fill-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Button-Border-and-Text-Color-Fill-On-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Button-Border-and-Text-Color-Fill-On-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25170,"url":"https:\/\/codemyui.com\/fading-text-css-blend-modes\/","url_meta":{"origin":24628,"position":4},"title":"Fading text with CSS blend modes","author":"Saijo George","date":"November 21, 2017","format":false,"excerpt":"A really cool text effect with CSS blend mode designed by Giana. When you hover over the faded text it comes into view. If you are having trouble with the pen, try the archived copy on GitHub Fading Text Snippet","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/fading-text-with-css-blend-modes.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/fading-text-with-css-blend-modes.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/fading-text-with-css-blend-modes.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/fading-text-with-css-blend-modes.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12667,"url":"https:\/\/codemyui.com\/css-bordertransitions-buttons\/","url_meta":{"origin":24628,"position":5},"title":"CSS BorderTransitions for Buttons","author":"Hima Vincent","date":"March 11, 2017","format":false,"excerpt":"A bunch of CSS BorderTransitions designed by Giana. There are multitple designs to to choose from. If you are having trouble with the pen, try the archived copy on GitHub CSS BorderTransitions Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"CSS BorderTransitions for Buttons","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/css-border-transitions.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/css-border-transitions.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/css-border-transitions.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/css-border-transitions.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\/24628","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=24628"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24628\/revisions"}],"predecessor-version":[{"id":28262,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24628\/revisions\/28262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/24642"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}