{"id":22,"date":"2016-05-19T02:49:05","date_gmt":"2016-05-19T02:49:05","guid":{"rendered":"http:\/\/codemyui.com\/slider-icon-hover-animation\/"},"modified":"2019-09-19T14:12:54","modified_gmt":"2019-09-19T04:12:54","slug":"slider-icon-hover-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/slider-icon-hover-animation\/","title":{"rendered":"Slider Icon Hover Animation"},"content":{"rendered":"<p>Checkout this cool animated slider icon on hover designed by&nbsp;<a href=\"https:\/\/twitter.com\/WhyNotDoStuff\" target=\"_blank\" rel=\"noopener noreferrer\">Alec Ortega<\/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\/9a949f950a73a50ac998c2f816a539da\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='393' data-theme-id='0' data-slug-hash='xVeopJ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Animated Sliders Icon by Alec Ortega (@alecortega) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Checkout this cool animated slider icon on hover designed by&nbsp;Alec Ortega<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/slider-icon-hover-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":327,"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":[192416248,119262],"class_list":["post-22","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-hover-animation","tag-icon","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/animated-slider-icon.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":15877,"url":"https:\/\/codemyui.com\/close-next-previous-arrow-svg-animation\/","url_meta":{"origin":22,"position":0},"title":"Close, Next &amp; Previous Arrow SVG Animation","author":"Hima Vincent","date":"May 23, 2017","format":false,"excerpt":"If you have an image slider, paginated content or section in the hero section where you want to showcase multiple items and give users a way to browse through them using next and previous arrows, this design by Jean Paze might be just what you are looking for. It uses\u2026","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"Close Next & Previous Arrow SVG Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/close-next-previous-arrow-svg-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\/05\/close-next-previous-arrow-svg-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/close-next-previous-arrow-svg-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/close-next-previous-arrow-svg-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":70,"url":"https:\/\/codemyui.com\/simple-social-icon-hover-animation-using-svg\/","url_meta":{"origin":22,"position":1},"title":"Simple Social Icon Hover\u00a0Animation Using SVG","author":"Hima Vincent","date":"December 9, 2015","format":false,"excerpt":"Various social line icons animated on hover. Designed by web-tiki If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"Simple Social Icon Hover Animation Using SVG","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/simple-social-icon-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\/2015\/12\/simple-social-icon-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/simple-social-icon-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/simple-social-icon-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24823,"url":"https:\/\/codemyui.com\/glowing-social-icon-hover-animation\/","url_meta":{"origin":22,"position":2},"title":"Glowing Social Icon Hover Animation","author":"Hima Vincent","date":"October 24, 2017","format":false,"excerpt":"A bunch of social media icons designed with neon effect on hover designed by Rajeshdn. If you are having trouble with the pen, try the archived copy on GitHub Glowing Social Icon Hover Animation 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\/10\/glowing-social-icon-hover-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\/10\/glowing-social-icon-hover-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/glowing-social-icon-hover-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/glowing-social-icon-hover-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30235,"url":"https:\/\/codemyui.com\/card-based-image-slider-for-travel-websites-with-transition-and-hover-effects\/","url_meta":{"origin":22,"position":3},"title":"Card-based Image Slider For Travel Websites With Transition And Hover Effects","author":"Hima Vincent","date":"May 30, 2021","format":false,"excerpt":"Code by: Sikriti Dakua If you are having trouble with the pen, try the archived copy on\u00a0GitHub. Travel Website Card UI Image Slider Snippet","rel":"","context":"In \"image slider\"","block_context":{"text":"image slider","link":"https:\/\/codemyui.com\/tag\/image-slider\/"},"img":{"alt_text":"Card-based Image Slider For Travel Websites With Transition And Hover Effects","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Card-based-Image-Slider-For-Travel-Websites-With-Transition-And-Hover-Effects.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Card-based-Image-Slider-For-Travel-Websites-With-Transition-And-Hover-Effects.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Card-based-Image-Slider-For-Travel-Websites-With-Transition-And-Hover-Effects.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Card-based-Image-Slider-For-Travel-Websites-With-Transition-And-Hover-Effects.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":232,"url":"https:\/\/codemyui.com\/stacked-social-media-icons-expand-on-hover\/","url_meta":{"origin":22,"position":4},"title":"Stacked Social Media Icons\u00a0Expand\u00a0on\u00a0Hover","author":"Hima Vincent","date":"July 12, 2015","format":false,"excerpt":"This is a nice set of social media icons you can use in your project. When you hover over the stacked icons they expand to in reveal individual icons. Designed by Christophe Chabot. 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":"Stacked Social Media Icons Expand on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/stacked-social-media-icons-expand-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\/07\/stacked-social-media-icons-expand-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/stacked-social-media-icons-expand-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/stacked-social-media-icons-expand-on-hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":207,"url":"https:\/\/codemyui.com\/gummy-slider-hero-slider-animation\/","url_meta":{"origin":22,"position":5},"title":"Gummy Slider &#8211; Hero Slider Animation","author":"Hima Vincent","date":"July 23, 2015","format":false,"excerpt":"Looking for a slider this nice slider concept from\u00a0Lewi\u00a0might be just what you are looking for.\u00a0 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":"Gummy Slider \u2013 Hero Slider Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/gummy-slider-e28093-hero-slider-animation.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\/gummy-slider-e28093-hero-slider-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/gummy-slider-e28093-hero-slider-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/gummy-slider-e28093-hero-slider-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\/22","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=22"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":28181,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/22\/revisions\/28181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/327"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}