{"id":26382,"date":"2018-05-28T13:39:27","date_gmt":"2018-05-28T03:39:27","guid":{"rendered":"https:\/\/codemyui.com\/?p=26382"},"modified":"2018-05-28T13:39:27","modified_gmt":"2018-05-28T03:39:27","slug":"round-expand-on-hover-breadcrumbs","status":"publish","type":"post","link":"https:\/\/codemyui.com\/round-expand-on-hover-breadcrumbs\/","title":{"rendered":"Round Expand On Hover Breadcrumbs"},"content":{"rendered":"<p>With this <a href=\"https:\/\/codemyui.com\/tag\/breadcrumb\/\">breadcrumb navigation<\/a>, you will get a collapsed breadcrumb element and <a href=\"https:\/\/codemyui.com\/tag\/hover-animation\/\">on hover<\/a>, it expands to show you the lable for each item. It was designed by <a href=\"https:\/\/twitter.com\/renaudtertrais\" rel=\"noopener\" target=\"_blank\">Renaud Tertrais<\/a>. <!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/0ab0ddc3f6ff253b2f2ed507eb867b6b\" rel=\"noopener\" target=\"_blank\">GitHub<\/a><\/p>\n<h2>Breadcrumbs Snippet<\/h2>\n<p class='codepen'  data-height='377' data-theme-id='0' data-slug-hash='GfaCE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Tiny CSS3 Round Breadcrumb by Renaud Tertrais (@renaudtertrais) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>With this breadcrumb navigation, you will get a collapsed breadcrumb element and on hover, it expands to show you the lable for each item. It was designed by Renaud Tertrais.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/round-expand-on-hover-breadcrumbs\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":26383,"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":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":[608602268,5780130,192416248,30305495],"class_list":["post-26382","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-breadcrumb","tag-hidden-content","tag-hover-animation","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Round-Expand-On-Hover-Breadcrumbs.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26393,"url":"https:\/\/codemyui.com\/collapsed-to-reveal-full-breadcrumbs-on-hover\/","url_meta":{"origin":26382,"position":0},"title":"Collapsed to Reveal Full Breadcrumbs on Hover","author":"Saijo George","date":"May 28, 2018","format":false,"excerpt":"Personally, I am not a big fan of hiding the breadcrumb navigation like this but if you are really struggling to fit in the breadcrumb on the screen this might be something you are after. Only the 1st few characters of each breadcrumb element are shown by default and when\u2026","rel":"","context":"In \"breadcrumb\"","block_context":{"text":"breadcrumb","link":"https:\/\/codemyui.com\/tag\/breadcrumb\/"},"img":{"alt_text":"Collapsed to Reveal Full Breadcrumbs on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Collapsed-to-Reveal-Full-Breadcrumbs-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\/05\/Collapsed-to-Reveal-Full-Breadcrumbs-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Collapsed-to-Reveal-Full-Breadcrumbs-on-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Collapsed-to-Reveal-Full-Breadcrumbs-on-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26389,"url":"https:\/\/codemyui.com\/arrow-style-breadcrumb-navigation\/","url_meta":{"origin":26382,"position":1},"title":"Arrow Style Breadcrumb Navigation","author":"Saijo George","date":"May 28, 2018","format":false,"excerpt":"HEre we can see the classic breadcrumb navigation element with an arrow style background which helps users understand where they are on a website. This CSS only design by created by Zywave Team. If you are having trouble with the pen, try the archived copy on GitHub Breadcrumb Navigation Snippet","rel":"","context":"In \"breadcrumb\"","block_context":{"text":"breadcrumb","link":"https:\/\/codemyui.com\/tag\/breadcrumb\/"},"img":{"alt_text":"Arrow Style Breadcrumb Navigation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Arrow-Style-Breadcrumb-Navigation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Arrow-Style-Breadcrumb-Navigation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Arrow-Style-Breadcrumb-Navigation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Arrow-Style-Breadcrumb-Navigation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17941,"url":"https:\/\/codemyui.com\/various-breadcrumb-navigation-styles-css\/","url_meta":{"origin":26382,"position":2},"title":"Various Breadcrumb Navigation Styles with CSS","author":"Hima Vincent","date":"June 16, 2017","format":false,"excerpt":"Breadcrumb navigation helps reveals the user's location in a website or Web application and is great from a UX point of view. This CSS snippet by Stas Melnikov offers 7 styles for the breadcrumb navigation. If you are having trouble with the pen, try the archived copy on GitHub Breadcrumb\u2026","rel":"","context":"In \"breadcrumb\"","block_context":{"text":"breadcrumb","link":"https:\/\/codemyui.com\/tag\/breadcrumb\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Various-Breadcrumb-Navigation-Styles-with-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Various-Breadcrumb-Navigation-Styles-with-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Various-Breadcrumb-Navigation-Styles-with-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Various-Breadcrumb-Navigation-Styles-with-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4724,"url":"https:\/\/codemyui.com\/buttons-expanding-border-hover\/","url_meta":{"origin":26382,"position":3},"title":"Buttons with Expanding Border on Hover","author":"Hima Vincent","date":"December 1, 2016","format":false,"excerpt":"There are no shortages of button hover effects on here, this new design comes from Little Snippets. In this code snippet, you will see that the button has a thin line of border around the top right and bottom left corners. On hover, the border expands to fill the entire\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":29060,"url":"https:\/\/codemyui.com\/video-preview-button-with-expand-on-hover-and-full-screen-on-click\/","url_meta":{"origin":26382,"position":4},"title":"Video Preview Button With Expand on Hover and Full Screen on Click","author":"Saijo George","date":"December 16, 2019","format":false,"excerpt":"This is a very modern CSS only button where you have a small preview of the video playing in a circle and when you hover over it the preview expands to a bigger circle revealing more of the video and on click the video is loaded full screen. It was\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Video-Preview-Button-With-Expand-on-Hover-and-Full-Screen-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\/2019\/12\/Video-Preview-Button-With-Expand-on-Hover-and-Full-Screen-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Video-Preview-Button-With-Expand-on-Hover-and-Full-Screen-on-Click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Video-Preview-Button-With-Expand-on-Hover-and-Full-Screen-on-Click.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4925,"url":"https:\/\/codemyui.com\/marker-pen-highlight-effect-hover-click\/","url_meta":{"origin":26382,"position":5},"title":"Marker Pen Highlight Effect on Hover &amp; Click","author":"Hima Vincent","date":"December 23, 2016","format":false,"excerpt":"Another link hover effect where you see a wired.com style link effect. When you hover over the text you can see a marker pen like highlight effect expanding from the centre and move to the edges. When you click on the link the link the highlighted area contracts and expands.\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Marker Pen Highlight Effect on Hover Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/marker-pen-highlight-effect-on-hover-click.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/marker-pen-highlight-effect-on-hover-click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/marker-pen-highlight-effect-on-hover-click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/marker-pen-highlight-effect-on-hover-click.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\/26382","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=26382"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26382\/revisions"}],"predecessor-version":[{"id":26384,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26382\/revisions\/26384"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/26383"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=26382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=26382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=26382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}