{"id":69,"date":"2015-12-09T12:51:07","date_gmt":"2015-12-09T12:51:07","guid":{"rendered":"http:\/\/codemyui.com\/svg-image-mask-on-hover\/"},"modified":"2018-05-17T12:51:10","modified_gmt":"2018-05-17T02:51:10","slug":"svg-image-mask-on-hover","status":"publish","type":"post","link":"https:\/\/codemyui.com\/svg-image-mask-on-hover\/","title":{"rendered":"SVG Image Mask on Hover"},"content":{"rendered":"<p>Check out this cool image hover effect using SVG. Designed by <a href=\"https:\/\/twitter.com\/web_tiki\" target=\"_blank\" rel=\"noopener\">web-tiki<\/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\/b119ea4fcf99cafd258e\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='482' data-theme-id='0' data-slug-hash='LGYBrQ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Image revealing from text on hover by web-tiki (@web-tiki) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Check out this cool image hover effect using SVG. Designed by web-tiki<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/svg-image-mask-on-hover\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":517,"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,1745484,112936,1512930],"class_list":["post-69","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-hover-animation","tag-image-effects","tag-svg","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/svg-image-mask-on-hover.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":70,"url":"https:\/\/codemyui.com\/simple-social-icon-hover-animation-using-svg\/","url_meta":{"origin":69,"position":0},"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":27352,"url":"https:\/\/codemyui.com\/hand-drawn-underline-effect-for-links\/","url_meta":{"origin":69,"position":1},"title":"Hand-drawn underline effect for links","author":"Saijo George","date":"May 21, 2019","format":false,"excerpt":"Remember how you used to mark important bits of text in books or notes by drawing underlines in them? Now you can create that same effect for text or links on your web page using a bit of SVG. This effect was designed by Michelle Barker. When you hover over\u2026","rel":"","context":"In \"hand drawn\"","block_context":{"text":"hand drawn","link":"https:\/\/codemyui.com\/tag\/hand-drawn\/"},"img":{"alt_text":"Hand-drawn underline effect for links","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Hand-drawn-underline-effect-for-links.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Hand-drawn-underline-effect-for-links.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Hand-drawn-underline-effect-for-links.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Hand-drawn-underline-effect-for-links.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27230,"url":"https:\/\/codemyui.com\/hover-to-lift-fog-of-war-and-reveal-gallery-images\/","url_meta":{"origin":69,"position":2},"title":"Hover to lift Fog of War and Reveal Gallery Images","author":"Saijo George","date":"March 24, 2019","format":false,"excerpt":"Do you want o hide your image gallery and only reveal the images on hover? This is the perfect snippet for you, it lifts the dark background to reveal the image. Designed by Noel Delgado. If you are having trouble with the pen, try the archived copy on GitHub Image\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Hover to lift Fog of War and Reveal Gallery Images","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/Hover-to-lift-Fog-of-War-and-Reveal-Gallery-Images.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/Hover-to-lift-Fog-of-War-and-Reveal-Gallery-Images.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/Hover-to-lift-Fog-of-War-and-Reveal-Gallery-Images.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/Hover-to-lift-Fog-of-War-and-Reveal-Gallery-Images.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":167,"url":"https:\/\/codemyui.com\/shattering-text-animation\/","url_meta":{"origin":69,"position":3},"title":"Shattering Text Animation","author":"Hima Vincent","date":"September 21, 2015","format":false,"excerpt":"This is a cool text animation using SVG that shatters into pieces and if you want to see that in slowmo just hover. Designed by Arsen Zbidniakov 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":"Shattering Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Shattering-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Shattering-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Shattering-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Shattering-Text-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":10931,"url":"https:\/\/codemyui.com\/fancy-hover-effect-button\/","url_meta":{"origin":69,"position":4},"title":"Fancy Hover Effect for Button","author":"Hima Vincent","date":"February 24, 2017","format":false,"excerpt":"This fancy hover effect for buttons was designed by LukasOe. On hover, the button text colour is inverted and the button goes from a solid colour to a series of lines. If you are having trouble with the pen, try the archived copy on GitHub Fancy Button Hover Effect Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Folding Line Hover Animation Using SVG","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/folding-line-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\/2017\/02\/folding-line-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/folding-line-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/folding-line-hover-animation-using-svg.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1296,"url":"https:\/\/codemyui.com\/social-media-icon-hover-tooltip\/","url_meta":{"origin":69,"position":5},"title":"Social Media Icon Hover Tooltip","author":"Hima Vincent","date":"July 26, 2016","format":false,"excerpt":"This is an interesting way to showcase your social media profiles on your webpage. When you hover over these SVG icons you get a solid colored tooltip with a text label. Designed by Maciej Leszczy\u0144ski If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Social Media Icon Hover Tooltip","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/social-media-icon-hover-tooltip.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/social-media-icon-hover-tooltip.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/social-media-icon-hover-tooltip.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/social-media-icon-hover-tooltip.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\/69","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=69"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":26175,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/69\/revisions\/26175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/517"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}