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