{"id":3542,"date":"2018-07-04T18:48:55","date_gmt":"2018-07-04T18:48:55","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=3542"},"modified":"2019-10-16T07:51:48","modified_gmt":"2019-10-16T07:51:48","slug":"svg-clip-path-hover-effect","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/svg-clip-path-hover-effect\/","title":{"rendered":"SVG CLIP-PATH HOVER EFFECT"},"content":{"rendered":"<p>This is an amazing and simple attempt to re-create CJ Gammon\u2019s portfolio grid hover effect using SVG clip-path and CSS Transitions. Note: this is an experiment, it does not seem to work on Firefox 43.0.4 neither have touch support. Tested on Chrome 47.0.2526.106, Opera 34.0 and Safari 8.0.6.<br \/>\nMade by Noel Delgado<br \/>\nJanuary 15, 2016<\/p>\n<a href=\"https:\/\/codepen.io\/noeldelgado\/share\/zip\/PZJGLx\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n<a href=\"https:\/\/codepen.io\/noeldelgado\/pen\/PZJGLx\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"This is an amazing and simple attempt to re-create CJ Gammon\u2019s portfolio grid hover effect using SVG clip-path and CSS Transitions. Note: this is an experiment, it does not seem to work on Firefox 43.0.4 neither have touch support. Tested on Chrome 47.0.2526.106, Opera 34.0 and Safari 8.0.6. Made by Noel Delgado January 15, 2016<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":2992,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[250],"tags":[487,506],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/3542"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=3542"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/3542\/revisions"}],"predecessor-version":[{"id":18321,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/3542\/revisions\/18321"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/2992"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=3542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=3542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=3542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}