{"id":29945,"date":"2020-06-10T09:54:02","date_gmt":"2020-06-09T23:54:02","guid":{"rendered":"https:\/\/codemyui.com\/?p=29945"},"modified":"2020-06-10T09:54:05","modified_gmt":"2020-06-09T23:54:05","slug":"css-only-styling-child-elements-on-hover","status":"publish","type":"post","link":"https:\/\/codemyui.com\/css-only-styling-child-elements-on-hover\/","title":{"rendered":"CSS Only Styling Child Elements on Hover"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Code by<\/strong>: <a href=\"https:\/\/twitter.com\/CodyWebHouse\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">CodyHouse<\/a> from Codepen<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/4684d6708dbb4edcff8065fbfbd1ec84\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">GitHub<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Siblings Style on Hover Snippet<\/h2>\n\n\n<p class='codepen'  data-height='473' data-theme-id='0' data-slug-hash='KKdrmXj' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen CSS Nugget: Styling siblings on hover by CodyHouse (@codyhouse) on CodePen.<\/p>\n\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Code by: CodyHouse from Codepen<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/css-only-styling-child-elements-on-hover\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":29948,"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":[192416248,1745484,81450],"class_list":["post-29945","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-hover-animation","tag-image-effects","tag-image-gallery","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/06\/CSS-Only-Styling-Child-Elements-on-Hover.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":208,"url":"https:\/\/codemyui.com\/secondary-3d-folding-content-panel\/","url_meta":{"origin":29945,"position":0},"title":"Secondary 3D Folding Content Panel","author":"Hima Vincent","date":"July 22, 2015","format":false,"excerpt":"A great example of \u00a0a secondary content panel that folds in to the main content, powered by CSS Transformations and jQuery. Designed by Sebastiano Guerriero. This tutorial from CodyHouse will let you add a secondary content panel that folds on click. It\u2019s great if you want to add secondary content\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Secondary 3D Folding Content Panel","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/secondary-3d-folding-content-panel.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\/secondary-3d-folding-content-panel.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/secondary-3d-folding-content-panel.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/secondary-3d-folding-content-panel.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12006,"url":"https:\/\/codemyui.com\/one-hand-optimised-mobile-navigation\/","url_meta":{"origin":29945,"position":1},"title":"One Hand Optimised Mobile Navigation","author":"Hima Vincent","date":"February 27, 2017","format":false,"excerpt":"We have seen various navigation menu snippets here, this is a special one because it's optimised for use with a single hand on mobile devices. When you scroll down a hamburger menu appears in the bottom right corner, this is easily accessible to users when they are operating the device\u2026","rel":"","context":"In \"mobile optimised\"","block_context":{"text":"mobile optimised","link":"https:\/\/codemyui.com\/tag\/mobile-optimised\/"},"img":{"alt_text":"One Hand Optimised Mobile Navigation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/one-hand-optimised-mobile-navigation.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\/one-hand-optimised-mobile-navigation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/one-hand-optimised-mobile-navigation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/one-hand-optimised-mobile-navigation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24729,"url":"https:\/\/codemyui.com\/target-elements-based-position-hovered-element\/","url_meta":{"origin":29945,"position":2},"title":"Target Elements Based on their Position to a Hovered Element","author":"Hima Vincent","date":"September 19, 2017","format":false,"excerpt":"In this snippet Giana shows you how you can target elements based on their position to a hovered element using CSS sibling selector. If you are having trouble with the pen, try the archived copy on GitHub CSS Sibling Selector 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\/09\/css-sibling-selector-with-hover-state.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/css-sibling-selector-with-hover-state.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/css-sibling-selector-with-hover-state.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/css-sibling-selector-with-hover-state.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":212,"url":"https:\/\/codemyui.com\/pricing-table-to-sign-up-form\/","url_meta":{"origin":29945,"position":3},"title":"Pricing Table to Sign Up Form","author":"Hima Vincent","date":"July 20, 2015","format":false,"excerpt":"A simple pricing table that expands up into a signup form when you click on it. Designed by Sebastiano Guerriero.\u00a0 Check out the Demo and Tutorial on CodyHouse","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Pricing Table to Sign Up Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/pricing-table-to-sign-up-form.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\/pricing-table-to-sign-up-form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/pricing-table-to-sign-up-form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/pricing-table-to-sign-up-form.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":266,"url":"https:\/\/codemyui.com\/3d-curtain-effect-on-scroll\/","url_meta":{"origin":29945,"position":4},"title":"3D Curtain Effect on Scroll","author":"Saijo George","date":"May 28, 2015","format":false,"excerpt":"This is a 3D curtain effect on scroll using CSS and jQuery by Claudia Romano at CodyHouse. Check out the demo and the tutorial.\u00a0","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Curtain Effect on Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/3d-curtain-effect-on-scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/3d-curtain-effect-on-scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/3d-curtain-effect-on-scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/3d-curtain-effect-on-scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29664,"url":"https:\/\/codemyui.com\/pricing-tag-style-link-in-pure-css\/","url_meta":{"origin":29945,"position":5},"title":"Pricing Tag Style Link in Pure CSS","author":"Saijo George","date":"April 20, 2020","format":false,"excerpt":"Code by: GDW from Codepen If you are having trouble with the pen, try the archived copy on GitHub Tag Style Link Snippet","rel":"","context":"In \"link\"","block_context":{"text":"link","link":"https:\/\/codemyui.com\/tag\/link\/"},"img":{"alt_text":"Pricing Tag Style Link in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Pricing-Tag-Style-Link-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\/2020\/04\/Pricing-Tag-Style-Link-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Pricing-Tag-Style-Link-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Pricing-Tag-Style-Link-in-Pure-CSS.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\/29945","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=29945"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29945\/revisions"}],"predecessor-version":[{"id":29949,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29945\/revisions\/29949"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/29948"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=29945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=29945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=29945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}