{"id":26,"date":"2016-05-19T02:36:51","date_gmt":"2016-05-19T02:36:51","guid":{"rendered":"http:\/\/codemyui.com\/card-fold-down-hover-animation\/"},"modified":"2018-05-17T12:18:44","modified_gmt":"2018-05-17T02:18:44","slug":"card-fold-down-hover-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/card-fold-down-hover-animation\/","title":{"rendered":"Card Fold Down Hover Animation"},"content":{"rendered":"<p>Check out this amazing hover animation in which additional content card folded out on hover. Designed by <a href=\"https:\/\/twitter.com\/vajkri\" target=\"_blank\" rel=\"noopener\">Krisztina Vajda<\/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\/ec737b2157e7b1141b7379c844303289\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='502' data-theme-id='0' data-slug-hash='oxRwxy' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Card fold down effect with dynamic height by Kriszta (@vajkri) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Check out this amazing hover animation in which additional content card folded out on hover. Designed by Krisztina Vajda.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/card-fold-down-hover-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":379,"comment_status":"open","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":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":[177948406,5780130,192416248],"class_list":["post-26","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-card-ui","tag-hidden-content","tag-hover-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/card-fold-down-hover-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":5682,"url":"https:\/\/codemyui.com\/folded-paper-text-effect\/","url_meta":{"origin":26,"position":0},"title":"Folded Paper Text Effect","author":"Hima Vincent","date":"January 31, 2017","format":false,"excerpt":"This little snippet will allow you to add a 3D folded paper snake like text effect to your content. When you hover over the content the folds are removed and the text lays flat on the page. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Folded Paper Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/folded-paper-text-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\/folded-paper-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/folded-paper-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/folded-paper-text-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29534,"url":"https:\/\/codemyui.com\/rainbow-shadow-grid-animation-on-hover\/","url_meta":{"origin":26,"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":10931,"url":"https:\/\/codemyui.com\/fancy-hover-effect-button\/","url_meta":{"origin":26,"position":2},"title":"Fancy Hover Effect for Button","author":"Hima Vincent","date":"February 24, 2017","format":false,"excerpt":"This fancy hover effect for buttons was designed by LukasOe. On hover, the button text colour is inverted and the button goes from a solid colour to a series of lines. If you are having trouble with the pen, try the archived copy on GitHub Fancy Button Hover Effect Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Folding Line Hover Animation Using SVG","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/folding-line-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/folding-line-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/folding-line-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/folding-line-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":22918,"url":"https:\/\/codemyui.com\/3d-card-flip-hovering-text\/","url_meta":{"origin":26,"position":3},"title":"3D Card Flip With Hovering Text","author":"Hima Vincent","date":"September 20, 2019","format":false,"excerpt":"I am loving this hover effect by Tyrell Rummage, you have a bunch of cards with images in the background and a hovering text that acts as the title for these images. When you hover over them, the image flips to show the content for each card. The way the\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Card Flip With Hovering Text","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/3D-Card-Flip-With-Hovering-Text.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6805,"url":"https:\/\/codemyui.com\/image-hover-card-ui-effect\/","url_meta":{"origin":26,"position":4},"title":"Image Hover Card UI Effect","author":"Hima Vincent","date":"February 21, 2017","format":false,"excerpt":"This fancy image effect was is designed by Alex Moore. You have a full-screen image and when you hover over the text a card rises out to higlight the content. If you are having trouble with the pen, try the archived copy on GitHub Image Hover Card UI Effect Snippet","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/card-effect-compressor.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/card-effect-compressor.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/card-effect-compressor.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/card-effect-compressor.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":243,"url":"https:\/\/codemyui.com\/netflix-style-card-hover-animation\/","url_meta":{"origin":26,"position":5},"title":"Netflix Style Card Hover Animation","author":"Hima Vincent","date":"June 22, 2015","format":false,"excerpt":"A simple Netflix style card hover animation for image gallery websites by Lewi Hussey 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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26","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=26"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":26131,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26\/revisions\/26131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/379"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}