{"id":25170,"date":"2017-11-21T20:40:52","date_gmt":"2017-11-21T10:40:52","guid":{"rendered":"https:\/\/codemyui.com\/?p=25170"},"modified":"2017-11-21T20:40:52","modified_gmt":"2017-11-21T10:40:52","slug":"fading-text-css-blend-modes","status":"publish","type":"post","link":"https:\/\/codemyui.com\/fading-text-css-blend-modes\/","title":{"rendered":"Fading text with CSS blend modes"},"content":{"rendered":"<p>A really cool <a href=\"https:\/\/codemyui.com\/tag\/text-animation\/\">text effect<\/a> with <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">CSS<\/a> blend mode designed by <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/twitter.com\/gianablantin\">Giana<\/a>. When you hover over the faded text it <a href=\"https:\/\/codemyui.com\/tag\/hidden-content\/\">comes into view<\/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\/07d630eeabad3465a7cc0569b91b2509\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Fading Text Snippet<\/h2>\n<p class='codepen'  data-height='557' data-theme-id='0' data-slug-hash='aJmxXm' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Fading text with CSS blend modes by Giana (@giana) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A really cool text effect with CSS blend mode designed by Giana. When you hover over the faded text it comes into view.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/fading-text-css-blend-modes\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":25171,"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":[5780130,30305495,1512930],"class_list":["post-25170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-hidden-content","tag-pure-css","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/fading-text-with-css-blend-modes.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":19762,"url":"https:\/\/codemyui.com\/shimmering-neon-text\/","url_meta":{"origin":25170,"position":0},"title":"Shimmering Neon Text","author":"Hima Vincent","date":"September 26, 2019","format":false,"excerpt":"If you need to add some neon effect to your text then this snippet by Giana is just what you need. This effect can be achieved using pure CSS. If you are having trouble with the pen, try the archived copy on GitHub Shimmering Neon Text Snippet","rel":"","context":"In \"neon\"","block_context":{"text":"neon","link":"https:\/\/codemyui.com\/tag\/neon\/"},"img":{"alt_text":"Shimmering Neon Text","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Shimmering-Neon-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\/Shimmering-Neon-Text.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Shimmering-Neon-Text.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Shimmering-Neon-Text.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26683,"url":"https:\/\/codemyui.com\/button-border-and-text-color-fill-on-hover\/","url_meta":{"origin":25170,"position":1},"title":"Button Border and Text Color Fill On Hover","author":"Saijo George","date":"July 16, 2018","format":false,"excerpt":"With this CSS only snippet designed by Giana has a cool button animation when you hover over it, the colour of the text and border changes from the bottom right. If you are having trouble with the pen, try the archived copy on GitHub Button Color Change Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button Border and Text Color Fill On Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Button-Border-and-Text-Color-Fill-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\/07\/Button-Border-and-Text-Color-Fill-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Button-Border-and-Text-Color-Fill-On-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Button-Border-and-Text-Color-Fill-On-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12667,"url":"https:\/\/codemyui.com\/css-bordertransitions-buttons\/","url_meta":{"origin":25170,"position":2},"title":"CSS BorderTransitions for Buttons","author":"Hima Vincent","date":"March 11, 2017","format":false,"excerpt":"A bunch of CSS BorderTransitions designed by Giana. There are multitple designs to to choose from. If you are having trouble with the pen, try the archived copy on GitHub CSS BorderTransitions Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"CSS BorderTransitions for Buttons","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/css-border-transitions.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\/css-border-transitions.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/css-border-transitions.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/css-border-transitions.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":25170,"position":3},"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":24628,"url":"https:\/\/codemyui.com\/image-grid-kenburns-description-hover\/","url_meta":{"origin":25170,"position":4},"title":"Image Grid with KenBurns and Description on Hover","author":"Hima Vincent","date":"September 23, 2019","format":false,"excerpt":"This Pure CSS image gallery was designed by Giana, it offers direction aware hover effect by bringing up the description associated with each image and a ken burns effect for the background image. If you are having trouble with the pen, try the archived copy on GitHub Image Grid Snippet","rel":"","context":"In \"direction aware\"","block_context":{"text":"direction aware","link":"https:\/\/codemyui.com\/tag\/direction-aware\/"},"img":{"alt_text":"Image Grid with KenBurns and Description on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-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\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/image-grid-with-kenburns-and-description-on-hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25337,"url":"https:\/\/codemyui.com\/buttons-trippy-background-animation-hover\/","url_meta":{"origin":25170,"position":5},"title":"Buttons with Trippy Background Animation on Hover","author":"Saijo George","date":"January 8, 2018","format":false,"excerpt":"These are pure CSS effects that add some trippy background animations to buttons on hover. From scatter lines to bubbles there are six different animations to choose from, it was designed by Giana. If you are having trouble with the pen, try the archived copy on GitHub Buttons Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Buttons with Trippy Background Animation on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/buttons-with-trippy-background-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\/2018\/01\/buttons-with-trippy-background-animation-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/buttons-with-trippy-background-animation-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/buttons-with-trippy-background-animation-on-hover.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\/25170","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=25170"}],"version-history":[{"count":0,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25170\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25171"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}