{"id":213,"date":"2015-07-20T11:55:23","date_gmt":"2015-07-20T11:55:23","guid":{"rendered":"http:\/\/codemyui.com\/text-hover-effect-animations\/"},"modified":"2019-11-08T11:26:03","modified_gmt":"2019-11-08T00:26:03","slug":"text-hover-effect-animations","status":"publish","type":"post","link":"https:\/\/codemyui.com\/text-hover-effect-animations\/","title":{"rendered":"Text Hover Effect Animations"},"content":{"rendered":"<p>Some great inspiration for text hover effects by the awesome folks at Codrops.<\/p>\n<p><!--more--><\/p>\n<p>Check out the <a href=\"http:\/\/tympanus.net\/Development\/TextStylesHoverEffects\/\" target=\"_blank\" rel=\"noopener noreferrer\">Demo<\/a> and <a href=\"http:\/\/tympanus.net\/codrops\/2015\/05\/13\/inspiration-for-text-styles-and-hover-effects\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tutorial<\/a> on Codrops.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some great inspiration for text hover effects by the awesome folks at Codrops.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/text-hover-effect-animations\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":28887,"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":[1807,192416248,1512930],"class_list":["post-213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-hover-animation","tag-text-animation","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Text-Hover-Effect-Animations.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":225,"url":"https:\/\/codemyui.com\/hover-effect-using-svg-shapes\/","url_meta":{"origin":213,"position":0},"title":"Hover effect using SVG shapes","author":"Hima Vincent","date":"July 15, 2015","format":false,"excerpt":"These hover effects using various SVG shape would look so good on your image gallery type projects. Designed by Manoela Ilic. Check out the Demo and Tutorial on Codrops.","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Hover effect using SVG shapes","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/hover-effect-using-svg-shapes.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/hover-effect-using-svg-shapes.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/hover-effect-using-svg-shapes.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/hover-effect-using-svg-shapes.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":110,"url":"https:\/\/codemyui.com\/3d-rotation-on-hover\/","url_meta":{"origin":213,"position":1},"title":"3D Rotation On Hover","author":"Hima Vincent","date":"November 3, 2015","format":false,"excerpt":"This is a great example to showcase books, movie covers and other similar content. When you hover over the image it does a 3D rotation to show more information. Designed by Nick Pettit. Check out the Demo and Tutorial on Codrops","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Rotation On Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/3d-rotation-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\/2015\/11\/3d-rotation-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/3d-rotation-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/3d-rotation-on-hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":38,"url":"https:\/\/codemyui.com\/animated-hardcover-paperback-books-in-pure-css\/","url_meta":{"origin":213,"position":2},"title":"Animated Hardcover &amp; Paperback\u00a0Books in Pure CSS","author":"Hima Vincent","date":"April 18, 2016","format":false,"excerpt":"This is a great way to showcase your book related products on an eCommerce site. Hovering over the books will open it and flip the pages to reveal \u00a0a download button. Designed by Codrops. Check out the tutorial and the demo.","rel":"","context":"In \"book inspired\"","block_context":{"text":"book inspired","link":"https:\/\/codemyui.com\/tag\/css-flip-book\/"},"img":{"alt_text":"Animated Hardcover & Paperback Books in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/04\/animated-hardcover-paperback-books-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/04\/animated-hardcover-paperback-books-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/04\/animated-hardcover-paperback-books-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/04\/animated-hardcover-paperback-books-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":13314,"url":"https:\/\/codemyui.com\/merci-michel-com-3d-image-stacked-effect\/","url_meta":{"origin":213,"position":3},"title":"merci-michel.com 3D Image Stacked Effect","author":"Hima Vincent","date":"March 27, 2017","format":false,"excerpt":"Ever wanted to recreate the 3D Image Stacked Effect seen on merci-michel.com? Now thanks to the snippet designed by Mary Lou for Codrops, you can. You can find the project on Github(Our Fork). Check out the Demo and Tutorial on Codrops.","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"merci-michel.com 3D Image Stacked Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/merci-michel-com-3d-image-stacked-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\/03\/merci-michel-com-3d-image-stacked-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/merci-michel-com-3d-image-stacked-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/merci-michel-com-3d-image-stacked-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17578,"url":"https:\/\/codemyui.com\/fancy-tooltip-animations\/","url_meta":{"origin":213,"position":4},"title":"Fancy Tooltip Animations","author":"Hima Vincent","date":"June 13, 2017","format":false,"excerpt":"Here is a bunch of fancy tooltip animations using anime.js and SVG. There are 12 designs ranging from thought bubble to chat bubble to choose from. You can find the project on Github(Our Fork). Check out the Demo and Tutorial on Codrops.","rel":"","context":"In \"anime.js\"","block_context":{"text":"anime.js","link":"https:\/\/codemyui.com\/tag\/anime-js\/"},"img":{"alt_text":"Fancy Tooltip Animations","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/fancy-tooltip-animations.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\/fancy-tooltip-animations.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/fancy-tooltip-animations.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/fancy-tooltip-animations.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":226,"url":"https:\/\/codemyui.com\/click-to-expand-search-bar\/","url_meta":{"origin":213,"position":5},"title":"Click to Expand Search Bar","author":"Hima Vincent","date":"July 15, 2015","format":false,"excerpt":"The search bar can be opened on click, it has a fluid width and it\u2019s mobile-friendly. Designed by Manoela Ilic. Check out the Demo and Tutorial on Codrops.","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Click to Expand Search Bar","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/click-to-expand-search-bar.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/click-to-expand-search-bar.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/click-to-expand-search-bar.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/click-to-expand-search-bar.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\/213","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=213"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"predecessor-version":[{"id":28888,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/213\/revisions\/28888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/28887"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}