{"id":525,"date":"2019-02-28T08:18:42","date_gmt":"2019-02-28T08:18:42","guid":{"rendered":"https:\/\/themestrace.com\/tracem\/opacity-hover-copy-2\/"},"modified":"2024-03-24T22:29:44","modified_gmt":"2024-03-24T16:29:44","slug":"link-reveal-hover","status":"publish","type":"page","link":"https:\/\/themestrace.com\/tracem\/link-reveal-hover\/","title":{"rendered":"Link Reveal"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"525\" class=\"elementor elementor-525\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-23f16ae elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"23f16ae\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-363c827\" data-id=\"363c827\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4d97686 elementor-widget elementor-widget-tracem-portfolio\" data-id=\"4d97686\" data-element_type=\"widget\" data-widget_type=\"tracem-portfolio.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"tracem-portfolio-area tracem-relative portfolio-grid is-animation link-reveal\" id=\"tracem-portfolio\">\r\n    <div class=\"container-fluid\">\r\n        <div class=\"row\">\r\n            \r\n                <div class=\"col-lg-4 col-md-6 col-12 grid\">\r\n                    <div class=\"grid__item\">\r\n                        <div class=\"portfolio-grid-wrapper\">\r\n                            <div class=\"scroll-img portfolio-grid\" style=\"background-image: url(https:\/\/themestrace.com\/tracem\/wp-content\/uploads\/2019\/02\/tport-13.jpg);\">\r\n                            <\/div>\r\n                            <div class=\"portfolio-overlay\">\r\n                                <div class=\"tracem-ovh\"><span class=\"arrow\"><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/the-weeping-waves\/\"><i class=\"ti-arrow-right\"><\/i><\/a><\/span><\/div>                            <\/div>\r\n                            <div class=\"portfolio-details\">\r\n                                <div class=\"portfolio-cats\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h4><a href=\"https:\/\/themestrace.com\/tracem\/portfolio_category\/design-intro\/\" rel=\"tag\">Design Intro<\/a><\/h4>\r\n                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-cats -->\r\n                                <div class=\"portfolio-title\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h3><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/the-weeping-waves\/\">The Weeping Waves<\/a><\/h3>                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-title -->\r\n                            <\/div><!-- .portfolio-details -->\r\n                                                    <\/div><!-- .portfolio-grid-wrapper -->\r\n                    <\/div>\r\n                <\/div><!-- .col-md-4 .col-sm-12 .grid -->\r\n\r\n            \r\n                <div class=\"col-lg-4 col-md-6 col-12 grid\">\r\n                    <div class=\"grid__item\">\r\n                        <div class=\"portfolio-grid-wrapper\">\r\n                            <div class=\"scroll-img portfolio-grid\" style=\"background-image: url(https:\/\/themestrace.com\/tracem\/wp-content\/uploads\/2019\/02\/tport-22.jpg);\">\r\n                            <\/div>\r\n                            <div class=\"portfolio-overlay\">\r\n                                <div class=\"tracem-ovh\"><span class=\"arrow\"><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/door-in-the-snow\/\"><i class=\"ti-arrow-right\"><\/i><\/a><\/span><\/div>                            <\/div>\r\n                            <div class=\"portfolio-details\">\r\n                                <div class=\"portfolio-cats\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h4><a href=\"https:\/\/themestrace.com\/tracem\/portfolio_category\/creative-design\/\" rel=\"tag\">Creative Design<\/a><\/h4>\r\n                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-cats -->\r\n                                <div class=\"portfolio-title\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h3><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/door-in-the-snow\/\">Door in the Snow<\/a><\/h3>                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-title -->\r\n                            <\/div><!-- .portfolio-details -->\r\n                                                    <\/div><!-- .portfolio-grid-wrapper -->\r\n                    <\/div>\r\n                <\/div><!-- .col-md-4 .col-sm-12 .grid -->\r\n\r\n            \r\n                <div class=\"col-lg-4 col-md-6 col-12 grid\">\r\n                    <div class=\"grid__item\">\r\n                        <div class=\"portfolio-grid-wrapper\">\r\n                            <div class=\"scroll-img portfolio-grid\" style=\"background-image: url(https:\/\/themestrace.com\/tracem\/wp-content\/uploads\/2019\/02\/tport-19.jpg);\">\r\n                            <\/div>\r\n                            <div class=\"portfolio-overlay\">\r\n                                <div class=\"tracem-ovh\"><span class=\"arrow\"><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/the-healer-of-the-cloud\/\"><i class=\"ti-arrow-right\"><\/i><\/a><\/span><\/div>                            <\/div>\r\n                            <div class=\"portfolio-details\">\r\n                                <div class=\"portfolio-cats\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h4><a href=\"https:\/\/themestrace.com\/tracem\/portfolio_category\/design-factory\/\" rel=\"tag\">Design Factory<\/a><\/h4>\r\n                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-cats -->\r\n                                <div class=\"portfolio-title\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h3><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/the-healer-of-the-cloud\/\">The Healer of the Cloud<\/a><\/h3>                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-title -->\r\n                            <\/div><!-- .portfolio-details -->\r\n                                                    <\/div><!-- .portfolio-grid-wrapper -->\r\n                    <\/div>\r\n                <\/div><!-- .col-md-4 .col-sm-12 .grid -->\r\n\r\n            \r\n                <div class=\"col-lg-4 col-md-6 col-12 grid\">\r\n                    <div class=\"grid__item\">\r\n                        <div class=\"portfolio-grid-wrapper\">\r\n                            <div class=\"scroll-img portfolio-grid\" style=\"background-image: url(https:\/\/themestrace.com\/tracem\/wp-content\/uploads\/2019\/02\/tport-24.jpg);\">\r\n                            <\/div>\r\n                            <div class=\"portfolio-overlay\">\r\n                                <div class=\"tracem-ovh\"><span class=\"arrow\"><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/the-words-healing\/\"><i class=\"ti-arrow-right\"><\/i><\/a><\/span><\/div>                            <\/div>\r\n                            <div class=\"portfolio-details\">\r\n                                <div class=\"portfolio-cats\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h4><a href=\"https:\/\/themestrace.com\/tracem\/portfolio_category\/design-scope\/\" rel=\"tag\">Design Scope<\/a><\/h4>\r\n                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-cats -->\r\n                                <div class=\"portfolio-title\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h3><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/the-words-healing\/\">The Word&#8217;s Healing<\/a><\/h3>                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-title -->\r\n                            <\/div><!-- .portfolio-details -->\r\n                                                    <\/div><!-- .portfolio-grid-wrapper -->\r\n                    <\/div>\r\n                <\/div><!-- .col-md-4 .col-sm-12 .grid -->\r\n\r\n            \r\n                <div class=\"col-lg-4 col-md-6 col-12 grid\">\r\n                    <div class=\"grid__item\">\r\n                        <div class=\"portfolio-grid-wrapper\">\r\n                            <div class=\"scroll-img portfolio-grid\" style=\"background-image: url(https:\/\/themestrace.com\/tracem\/wp-content\/uploads\/2019\/03\/image-9.jpg);\">\r\n                            <\/div>\r\n                            <div class=\"portfolio-overlay\">\r\n                                <div class=\"tracem-ovh\"><span class=\"arrow\"><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/door-of-dreaming\/\"><i class=\"ti-arrow-right\"><\/i><\/a><\/span><\/div>                            <\/div>\r\n                            <div class=\"portfolio-details\">\r\n                                <div class=\"portfolio-cats\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h4><a href=\"https:\/\/themestrace.com\/tracem\/portfolio_category\/design-intro\/\" rel=\"tag\">Design Intro<\/a><\/h4>\r\n                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-cats -->\r\n                                <div class=\"portfolio-title\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h3><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/door-of-dreaming\/\">Door of Dreaming<\/a><\/h3>                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-title -->\r\n                            <\/div><!-- .portfolio-details -->\r\n                                                    <\/div><!-- .portfolio-grid-wrapper -->\r\n                    <\/div>\r\n                <\/div><!-- .col-md-4 .col-sm-12 .grid -->\r\n\r\n            \r\n                <div class=\"col-lg-4 col-md-6 col-12 grid\">\r\n                    <div class=\"grid__item\">\r\n                        <div class=\"portfolio-grid-wrapper\">\r\n                            <div class=\"scroll-img portfolio-grid\" style=\"background-image: url(https:\/\/themestrace.com\/tracem\/wp-content\/uploads\/2019\/02\/tport-28.jpg);\">\r\n                            <\/div>\r\n                            <div class=\"portfolio-overlay\">\r\n                                <div class=\"tracem-ovh\"><span class=\"arrow\"><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/the-ragged-gate\/\"><i class=\"ti-arrow-right\"><\/i><\/a><\/span><\/div>                            <\/div>\r\n                            <div class=\"portfolio-details\">\r\n                                <div class=\"portfolio-cats\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h4><a href=\"https:\/\/themestrace.com\/tracem\/portfolio_category\/creative-design\/\" rel=\"tag\">Creative Design<\/a><\/h4>\r\n                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-cats -->\r\n                                <div class=\"portfolio-title\">\r\n                                    <div class=\"tracem-ovh\">\r\n                                        <h3><a href=\"https:\/\/themestrace.com\/tracem\/portfolio\/the-ragged-gate\/\">The Ragged Gate<\/a><\/h3>                                    <\/div><!-- .tracem-ovh -->\r\n                                <\/div><!-- .portfolio-title -->\r\n                            <\/div><!-- .portfolio-details -->\r\n                                                    <\/div><!-- .portfolio-grid-wrapper -->\r\n                    <\/div>\r\n                <\/div><!-- .col-md-4 .col-sm-12 .grid -->\r\n\r\n                    <\/div><!-- .row -->\r\n    <\/div><!-- .container-fluid -->\r\n<\/section><!-- .tracem-portfolio-area -->\r\n\r\n<script>\r\n    ;(function($){\r\n        \"use strict\";\r\n        $(document).ready(function () {\r\n\r\n            if( document.querySelector('.grid > .grid__item') !== null )\r\n            {\r\n                \/\/ the settings for each one of the slides uncover instances.\r\n                const uncoverOpts = [\r\n                    {\r\n                        \/\/ total number of slices.\r\n                        slicesTotal: 5,\r\n                        \/\/ slices color.\r\n                        slicesColor: '#fff',\r\n                        \/\/ 'vertical' || 'horizontal'.\r\n                        orientation: 'vertical',\r\n                        \/\/ 'bottom' || 'top' for vertical orientation and 'right' || 'left' for horizontal orientation.\r\n                        slicesOrigin: {show: 'top', hide: 'top'}\r\n                    },\r\n                    {\r\n                        slicesTotal: 8, \r\n                        slicesColor: '#fff', \r\n                        orientation: 'horizontal', \r\n                        slicesOrigin: {show: 'left', hide: 'left'}\r\n                    },\r\n                    {\r\n                        slicesTotal: 11,\r\n                        slicesColor: '#fff',\r\n                        orientation: 'horizontal',\r\n                        slicesOrigin: {show: 'right', hide: 'right'}\r\n                    },\r\n                    {\r\n                        slicesTotal: 3,\r\n                        slicesColor: '#fff',\r\n                        orientation: 'vertical',\r\n                        slicesOrigin: {show: 'bottom', hide: 'bottom'}\r\n                    },\r\n                    {\r\n                        slicesTotal: 16,\r\n                        slicesColor: '#fff',\r\n                        orientation: 'vertical',\r\n                        slicesOrigin: {show: 'bottom', hide: 'bottom'}\r\n                    },\r\n                    {\r\n                        slicesTotal: 4,\r\n                        slicesColor: '#fff',\r\n                        orientation: 'horizontal',\r\n                        slicesOrigin: {show: 'left', hide: 'left'}\r\n                    },\r\n                    {\r\n                        slicesTotal: 10,\r\n                        slicesColor: '#fff',\r\n                        orientation: 'vertical',\r\n                        slicesOrigin: {show: 'top', hide: 'top'}\r\n                    },\r\n                    {\r\n                        slicesTotal: 8,\r\n                        slicesColor: '#d60b3f',\r\n                        orientation: 'horizontal',\r\n                        slicesOrigin: {show: 'right', hide: 'right'}\r\n                    },\r\n                    {\r\n                        slicesTotal: 6,\r\n                        slicesColor: '#250bd6',\r\n                        orientation: 'vertical',\r\n                        slicesOrigin: {show: 'top', hide: 'top'}\r\n                    }\r\n                ];\r\n\r\n                const uncoverAnimation = [\r\n                    {\r\n                        show: {\r\n                            slices: {duration: 600, delay: (_,i,t) => (t-i-1)*100, easing: 'easeInOutCirc'}\r\n                        },\r\n                        hide: {\r\n                            slices: {duration: 600, delay: (_,i,t) => (t-i-1)*100, easing: 'easeInOutCirc'}\r\n                        }\r\n                    },\r\n                    {\r\n                        show: {\r\n                            slices: {duration: 600, delay: (_,i,t) => Math.abs(t\/2-i)*80, easing: 'easeInOutCirc'}\r\n                        },\r\n                        hide: {\r\n                            slices: {duration: 300, delay: (_,i,t) => Math.abs(t\/2-i)*40, easing: 'easeInOutCirc'}\r\n                        }\r\n                    },\r\n                    {\r\n                        show: {\r\n                            slices: {delay: (_,i,t) => anime.random(0,t)*50}\r\n                        },\r\n                        hide: {\r\n                            slices: {duration: 300, delay: (_,i,t) => anime.random(0,t)*50}\r\n                        }\r\n                    },\r\n                    {\r\n                        show: {\r\n                            slices: {duration: 1200, delay: (_,i) => i*150, easing: 'easeOutExpo'}\r\n                        },\r\n                        hide: {\r\n                            slices: {duration: 500, delay: (_,i) => i*150, easing: 'easeInOutExpo'}\r\n                        }\r\n                    },\r\n                    {\r\n                        show: {\r\n                            slices: {duration: 600, delay: (_,i,t) => Math.abs(t\/2-i)*80, easing: 'easeInOutCirc'}\r\n                        },\r\n                        hide: {\r\n                            slices: {duration: 600, delay: (_,i,t) => Math.abs(t\/2-i)*80, easing: 'easeInOutCirc'}\r\n                        }\r\n                    },\r\n                    {\r\n                        show: {\r\n                            slices: {duration: 400, delay: (_,i,t) => (t-i-1)*150, easing: 'easeInOutQuad'}\r\n                        },\r\n                        hide: {\r\n                            slices: {duration: 400, delay: (_,i,t) => (t-i-1)*30, easing: 'easeInOutQuad'}\r\n                        }\r\n                    },\r\n                    {\r\n                        show: {\r\n                            slices: {duration: 400, delay: (_,i,t) => Math.abs(t\/4-i)*40, easing: 'easeInOutSine'},\r\n                            image: {\r\n                                duration: 900,\r\n                                easing: 'easeOutCubic',\r\n                                scale: [1.8,1]\r\n                            }\r\n                        },\r\n                        hide: {\r\n                            slices: {duration: 400, delay: (_,i,t) => Math.abs(t\/4-i)*40, easing: 'easeInOutSine'}\r\n                        }\r\n                    },\r\n                    {\r\n                        show: {\r\n                            slices: {duration: 600, easing: 'easeInOutCirc', delay: (_,i) => i*50},\r\n                            image: {\r\n                                duration: 1200,\r\n                                delay: 350,\r\n                                easing: 'easeOutCubic',\r\n                                scale: [1.3,1]\r\n                            }\r\n                        },\r\n                        hide: {\r\n                            slices: {duration: 300, easing: 'easeInOutCirc', delay: (_,i) => i*30}\r\n                        }\r\n                    },\r\n                    {\r\n                        show: {\r\n                            slices: {duration: 600, easing: 'easeInOutCirc', delay: (_,i) => i*100},\r\n                            image: {\r\n                                duration: 1200,\r\n                                delay: 350,\r\n                                easing: 'easeOutCubic',\r\n                                scale: [1.3,1]\r\n                            }\r\n                        },\r\n                        hide: {\r\n                            slices: {duration: 300, easing: 'easeInOutCirc', delay: (_,i) => i*40}\r\n                        }\r\n                    }\r\n                ];\r\n\r\n                const items = Array.from(document.querySelectorAll('.grid > .grid__item'));\r\n                \r\n                const observer = new IntersectionObserver((entries) => {\r\n                    entries.forEach(entry => {\r\n                        if ( entry.intersectionRatio > 0.5 ) {\r\n                            uncoverArr[items.indexOf(entry.target)].show(true, uncoverAnimation[items.indexOf(entry.target)].show);\r\n                        }\r\n                        else {\r\n                            uncoverArr[items.indexOf(entry.target)].hide(true, uncoverAnimation[items.indexOf(entry.target)].hide);\r\n                        }\r\n                    });\r\n                }, { threshold: 0.5 });\r\n                \r\n                let uncoverArr = [];\r\n\r\n                imagesLoaded(document.querySelectorAll('.scroll-img'), {background: true}, () => {\r\n                    document.body.classList.remove('loading');\r\n\r\n                    items.forEach((item, pos) => {\r\n                        uncoverArr.push(new Uncover(item.querySelector('.scroll-img'), uncoverOpts[pos]));\r\n                        observer.observe(item);\r\n                    });\r\n                });\r\n            }\r\n        });\r\n    })(jQuery)\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Design Intro The Weeping Waves Creative Design Door in the Snow Design Factory The Healer of the Cloud Design Scope The Word&#8217;s Healing Design Intro Door of Dreaming Creative Design The Ragged Gate<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-525","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/pages\/525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/comments?post=525"}],"version-history":[{"count":0,"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/pages\/525\/revisions"}],"wp:attachment":[{"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/media?parent=525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}