{"id":246,"date":"2015-06-18T23:57:39","date_gmt":"2015-06-18T23:57:39","guid":{"rendered":"http:\/\/codemyui.com\/card-stack-with-multiple-reveal-animation\/"},"modified":"2018-05-17T13:00:12","modified_gmt":"2018-05-17T03:00:12","slug":"card-stack-with-multiple-reveal-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/card-stack-with-multiple-reveal-animation\/","title":{"rendered":"Card Stack with multiple reveal animation"},"content":{"rendered":"<p>This set of card stack comes with various reveal animation like slide to right, expand to grid, split from middle and more. It can work well with image galleries. Designed by <a href=\"https:\/\/twitter.com\/chrishutchinson\" target=\"_blank\" rel=\"noopener\">Chris Hutchinson<\/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\/a296ec482cebc8f286cb\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='524' data-theme-id='0' data-slug-hash='nafEp' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Animated Card Stacks by Chris Hutchinson (@chrishutchinson) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This set of card stack comes with various reveal animation like slide to right, expand to grid, split from middle and more. It can work well with image galleries. Designed by Chris Hutchinson.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/card-stack-with-multiple-reveal-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":1206,"comment_status":"closed","ping_status":"open","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":[1807,177948406,18306875,1745484],"class_list":["post-246","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-card-ui","tag-grid-layout","tag-image-effects","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/card-stack-with-multiple-reveal-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":244,"url":"https:\/\/codemyui.com\/profile-card-animations\/","url_meta":{"origin":246,"position":0},"title":"Profile Card Animations","author":"Hima Vincent","date":"June 22, 2015","format":false,"excerpt":"A simple profile card animation that can be used in web design for user profiles. Designed by\u00a0 Chris Hutchinson, based on this Dribbble animation. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":29534,"url":"https:\/\/codemyui.com\/rainbow-shadow-grid-animation-on-hover\/","url_meta":{"origin":246,"position":1},"title":"Rainbow Shadow Grid Animation on Hover","author":"Saijo George","date":"March 11, 2020","format":false,"excerpt":"Here is a nice rainbow animation as a shadow for a div content. When you hover over it the div pulls in all the shadow elements to form a single card. By Sarah Fossheim. If you are having trouble with the pen, try the archived copy on GitHub Shadow Grid\u2026","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Rainbow Shadow Grid Animation on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/03\/Rainbow-Shadow-Grid-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\/2020\/03\/Rainbow-Shadow-Grid-Animation-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/03\/Rainbow-Shadow-Grid-Animation-on-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/03\/Rainbow-Shadow-Grid-Animation-on-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29288,"url":"https:\/\/codemyui.com\/image-gallery-stacked-as-narrow-slits-and-expands-to-show-the-full-image-on-click\/","url_meta":{"origin":246,"position":2},"title":"Image Gallery Stacked as Narrow Slits and Expands to Show The Full Image on Click","author":"Saijo George","date":"January 16, 2020","format":false,"excerpt":"A very fancy image gallery by Zed Dash, the images are stacked horizontally in very narrow cards and depending on the screen size the number of items will differ. When you click on a narrow image it expands and the existing expanded one collapse in a very smooth animation. If\u2026","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"Image Gallery Stacked as Narrow Slits and Expands to Show The Full Image on Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Image-Gallery-Stacked-as-Narrow-Slits-and-Expands-to-Show-The-Full-Image-on-Click.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\/Image-Gallery-Stacked-as-Narrow-Slits-and-Expands-to-Show-The-Full-Image-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Image-Gallery-Stacked-as-Narrow-Slits-and-Expands-to-Show-The-Full-Image-on-Click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Image-Gallery-Stacked-as-Narrow-Slits-and-Expands-to-Show-The-Full-Image-on-Click.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26866,"url":"https:\/\/codemyui.com\/stacked-card-with-progress-bar-animation\/","url_meta":{"origin":246,"position":3},"title":"Stacked Card with Progress Bar Animation","author":"Saijo George","date":"September 24, 2018","format":false,"excerpt":"Checkout the stacked card UI snippet that will allow you to show a multi step process with a progress bar. It was designed by\u00a0Brandon Ward. The steps are each shown as a card and stacked on top of each other and when you move from one step to the other,\u2026","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Stacked Card with Progress Bar Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Stacked-Card-with-Progress-Bar-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Stacked-Card-with-Progress-Bar-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Stacked-Card-with-Progress-Bar-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Stacked-Card-with-Progress-Bar-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17234,"url":"https:\/\/codemyui.com\/expanding-card-ui-reveal-blog-content\/","url_meta":{"origin":246,"position":4},"title":"Expanding Card UI to Reveal Blog Content","author":"Hima Vincent","date":"May 29, 2017","format":false,"excerpt":"If you need to show a grid of content with offset image thumbnails and titles in a card, that expands to reveal the blog article on click then this snippet by Rachel Smith will come in handy. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"article\"","block_context":{"text":"article","link":"https:\/\/codemyui.com\/tag\/article\/"},"img":{"alt_text":"Expanding Card UI to Reveal Blog Content","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/expanding-card-ui-to-reveal-blog-content.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/expanding-card-ui-to-reveal-blog-content.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/expanding-card-ui-to-reveal-blog-content.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/expanding-card-ui-to-reveal-blog-content.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29448,"url":"https:\/\/codemyui.com\/blog-archive-image-card-hover-animation\/","url_meta":{"origin":246,"position":5},"title":"Blog Archive Image Card Hover Animation","author":"Saijo George","date":"February 11, 2020","format":false,"excerpt":"This is a nice grid-style image gallery or blog archive layout that you can use in your webpages. When you hover over an image it slides in the description and a read more button. If you are having trouble with the pen, try the archived copy on GitHub Image Hover\u2026","rel":"","context":"In \"grid layout\"","block_context":{"text":"grid layout","link":"https:\/\/codemyui.com\/tag\/grid-layout\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Blog-Archive-Image-Card-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\/2020\/02\/Blog-Archive-Image-Card-Hover-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Blog-Archive-Image-Card-Hover-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Blog-Archive-Image-Card-Hover-Animation.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\/246","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=246"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"predecessor-version":[{"id":26352,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/246\/revisions\/26352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1206"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}