{"id":3352,"date":"2014-12-17T14:22:09","date_gmt":"2014-12-17T14:22:09","guid":{"rendered":"http:\/\/www.brandexponents.com\/oshin-demo\/?page_id=3352"},"modified":"2018-02-23T15:50:27","modified_gmt":"2018-02-23T14:50:27","slug":"animated-image-module","status":"publish","type":"page","link":"https:\/\/www.irenevannispenkress.com\/index.php\/animated-image-module\/","title":{"rendered":"Animated Image Module"},"content":{"rendered":"<div  class=\"tatsu-idj30vd8iq4a8fih tatsu-section    tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='50px 0% 90px 0%' data-padding-top='50px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-one-col tatsu-row-has-one-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-idj30vd9fv67o5v1\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-col tatsu-column-image- tatsu-column-effect-  tatsu-idj30vd9q7am7dtu\" data-animation=\"fadeIn\"   data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div class=\"oshine-module oshine-am-fh display-block  tatsu-idj30vda5md39mn4\"><style>.tatsu-idj30vda5md39mn4 .animate-icon-module-style1-wrap{height: 400px;}.tatsu-idj30vda5md39mn4 .animate-icon-module-style1{margin-bottom: 30px;}<\/style><div class=\"animate-icon-module-style1-wrap-container\"><div class=\"animate-icon-module-style1-wrap clearfix\" data-gutter-width=\"30\"><a  href=\"http:\/\/themeforest.net\" class=\"animate-icon-module-style1 be-bg-cover animate-icon-module ai-has-overlay fade-animate tatsu-idj30vdabcatc5ce   \" ><style>.tatsu-idj30vdabcatc5ce .font-icon{font-size: 51px;color: #000000 ;}.tatsu-idj30vdabcatc5ce .title_content{color: #000000 ;}.tatsu-idj30vdabcatc5ce{background-image: url(http:\/\/irenevannispenkress.com\/wp-content\/uploads\/2015\/09\/Minimal-Folio-Imported-21.png);background-color: #f2f2f2;}.tatsu-idj30vdabcatc5ce:hover{background-color: #e0a240;}.tatsu-idj30vdabcatc5ce .ai-overlay{background-color: rgba(0,0,0,0.8);}.tatsu-idj30vdabcatc5ce:hover .ai-overlay{background-color: rgba(0,0,0,0.8);}<\/style><div class=\"animate-icon-module-normal-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\"><i class=\"font-icon \" ><\/i><\/div><\/div><\/div><div class=\"animate-icon-module-hover-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\">\n<h6 style=\"text-align: center\"><span style=\"color: #ffffff\">FIXED HEIGHT ANIMATED MODULE<\/span><\/h6>\n<\/div><\/div><\/div><div class=\"ai-overlay\" ><\/div><\/a><a  href=\"http:\/\/themeforest.net\" class=\"animate-icon-module-style1 be-bg-cover animate-icon-module ai-has-overlay fade-animate tatsu-idj30vdags6tdu9d   \" ><style>.tatsu-idj30vdags6tdu9d .font-icon{font-size: 51px;color: #000000 ;}.tatsu-idj30vdags6tdu9d .title_content{color: #000000 ;}.tatsu-idj30vdags6tdu9d{background-color: #f2f2f2;}.tatsu-idj30vdags6tdu9d:hover{background-color: #e0a240;}.tatsu-idj30vdags6tdu9d .ai-overlay{background-color: rgba(224,162,64,0.8);}.tatsu-idj30vdags6tdu9d:hover .ai-overlay{background-color: rgba(224,162,64,0.8);}<\/style><div class=\"animate-icon-module-normal-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\"><i class=\"font-icon \" ><\/i><\/div><\/div><\/div><div class=\"animate-icon-module-hover-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\">\n<h6 style=\"text-align: center\"><span style=\"color: #ffffff\">FIXED HEIGHT ANIMATED MODULE<\/span><\/h6>\n<\/div><\/div><\/div><\/a><a  href=\"http:\/\/themeforest.net\" class=\"animate-icon-module-style1 be-bg-cover animate-icon-module ai-has-overlay fade-animate tatsu-idj30vdajr30zibs   \" ><style>.tatsu-idj30vdajr30zibs .font-icon{font-size: 51px;color: #000000 ;}.tatsu-idj30vdajr30zibs .title_content{color: #000000 ;}.tatsu-idj30vdajr30zibs{background-color: #f2f2f2;}.tatsu-idj30vdajr30zibs:hover{background-color: #e0a240;}.tatsu-idj30vdajr30zibs .ai-overlay{background-color: rgba(0,0,0,0.8);}.tatsu-idj30vdajr30zibs:hover .ai-overlay{background-color: rgba(0,0,0,0.8);}<\/style><div class=\"animate-icon-module-normal-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\"><i class=\"font-icon \" ><\/i><\/div><\/div><\/div><div class=\"animate-icon-module-hover-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\">\n<h6 style=\"text-align: center\"><span style=\"color: #ffffff\">FIXED HEIGHT ANIMATED MODULE<\/span><\/h6>\n<\/div><\/div><\/div><\/a><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-idj30vd9q7am7dtu.tatsu-column > .tatsu-column-inner > .tatsu-column-pad-wrap > .tatsu-column-pad{padding: 0px 0px 0px 0px;}.tatsu-idj30vd9q7am7dtu.tatsu-column > .tatsu-column-inner{border-width: 0 0 0 0;}.tatsu-idj30vd9q7am7dtu.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-idj30vd9q7am7dtu > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-idj30vd9q7am7dtu > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-idj30vd9q7am7dtu > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-idj30vd9q7am7dtu > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}.tatsu-idj30vd9q7am7dtu.tatsu-column{transform: translate3d(0px,0px, 0);}<\/style><\/div><\/div><\/div><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-one-col tatsu-row-has-one-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-idj30vdany2m78tt\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-col tatsu-column-image- tatsu-column-effect-  tatsu-idj30vdas5w4iaq\" data-animation=\"fadeIn\"   data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div class=\"oshine-module oshine-am-fh display-block  tatsu-idj30vdb2jfszoo\"><style>.tatsu-idj30vdb2jfszoo .animate-icon-module-style1-wrap{height: 600px;}.tatsu-idj30vdb2jfszoo .animate-icon-module-style1{margin-bottom: 30px;}<\/style><div class=\"animate-icon-module-style1-wrap-container\"><div class=\"animate-icon-module-style1-wrap clearfix\" data-gutter-width=\"30\"><a  href=\"http:\/\/themeforest.net\" class=\"animate-icon-module-style1 be-bg-cover animate-icon-module ai-has-overlay left-animate tatsu-idj30vdb6bbvc3ys   \" ><style>.tatsu-idj30vdb6bbvc3ys .font-icon{font-size: 51px;color: #000000 ;}.tatsu-idj30vdb6bbvc3ys .title_content{color: #000000 ;}.tatsu-idj30vdb6bbvc3ys{background-color: #f2f2f2;}.tatsu-idj30vdb6bbvc3ys:hover{background-color: #e0a240;}.tatsu-idj30vdb6bbvc3ys:hover .ai-overlay{background-color: rgba(224,162,64,1);}<\/style><div class=\"animate-icon-module-normal-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\"><i class=\"font-icon \" ><\/i><\/div><\/div><\/div><div class=\"animate-icon-module-hover-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\">\n<h6 style=\"text-align: center\"><span style=\"color: #ffffff\">FIXED HEIGHT ANIMATED MODULE<\/span><\/h6>\n<p style=\"text-align: center\"><span style=\"color: #ffffff\">This is a fixed height animated module. User can input the height of the box according to the content. The module can take an Image or any Color as BG. The Icon will appear on the BG. On Hover thee Content will be displayed. You can have a different color for Hover. Hover animation direction can be Left,Right,Top or Bottom. Cool, isn&#8217;t?<\/span><\/p>\n<\/div><\/div><\/div><\/a><a  href=\"http:\/\/themeforest.net\" class=\"animate-icon-module-style1 be-bg-cover animate-icon-module ai-has-overlay right-animate tatsu-idj30vdbb9bnltur   \" ><style>.tatsu-idj30vdbb9bnltur .font-icon{font-size: 51px;color: #ffffff ;}.tatsu-idj30vdbb9bnltur .title_content{color: #ffffff ;}.tatsu-idj30vdbb9bnltur{background-color: #000000;}.tatsu-idj30vdbb9bnltur:hover{background-color: #000000;}.tatsu-idj30vdbb9bnltur:hover .ai-overlay{background-color: rgba(255,255,255,0.9);}<\/style><div class=\"animate-icon-module-normal-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\"><i class=\"font-icon \" ><\/i><\/div><\/div><\/div><div class=\"animate-icon-module-hover-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\">\n<h6 style=\"text-align: center\">FIXED HEIGHT ANIMATED MODULE<\/h6>\n<p style=\"text-align: center\"><span style=\"color: #000000\">This is a fixed height animated module. User can input the height of the box according to the content. The module can take an Image or any Color as BG. The Icon will appear on the BG. On Hover thee Content will be displayed. You can have a different color for Hover. Hover animation direction can be Left,Right,Top or Bottom. Cool, isn&#8217;t?<\/span><\/p>\n<\/div><\/div><\/div><\/a><a  href=\"http:\/\/themeforest.net\" class=\"animate-icon-module-style1 be-bg-cover animate-icon-module ai-has-overlay top-animate tatsu-idj30vdbe42goorj   \" ><style>.tatsu-idj30vdbe42goorj .font-icon{font-size: 51px;color: #ffffff ;}.tatsu-idj30vdbe42goorj .title_content{color: #ffffff ;}.tatsu-idj30vdbe42goorj{background-color: #ffffff;}.tatsu-idj30vdbe42goorj:hover{background-color: #dd3333;}.tatsu-idj30vdbe42goorj:hover .ai-overlay{background-color: rgba(0,0,0,0.95);}<\/style><div class=\"animate-icon-module-normal-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\"><i class=\"font-icon none\" ><\/i><\/div><\/div><\/div><div class=\"animate-icon-module-hover-content\"><div class=\"display-table\"><div class=\"display-table-cell vertical-align-middle\">\n<h6 style=\"text-align: center\"><span style=\"color: #ffffff\">FIXED HEIGHT ANIMATED MODULE<\/span><\/h6>\n<p style=\"text-align: center\"><span style=\"color: #ffffff\">This is a fixed height animated module. User can input the height of the box according to the content. The module can take an Image or any Color as BG. The Icon will appear on the BG. On Hover thee Content will be displayed. You can have a different color for Hover. Hover animation direction can be Left,Right,Top or Bottom. Cool, isn&#8217;t?<\/span><\/p>\n<\/div><\/div><\/div><\/a><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-idj30vdas5w4iaq.tatsu-column > .tatsu-column-inner > .tatsu-column-pad-wrap > .tatsu-column-pad{padding: 0px 0px 0px 0px;}.tatsu-idj30vdas5w4iaq.tatsu-column > .tatsu-column-inner{border-width: 0 0 0 0;}.tatsu-idj30vdas5w4iaq.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-idj30vdas5w4iaq > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-idj30vdas5w4iaq > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-idj30vdas5w4iaq > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-idj30vdas5w4iaq > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}.tatsu-idj30vdas5w4iaq.tatsu-column{transform: translate3d(0px,0px, 0);}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><style>.tatsu-idj30vd8iq4a8fih{border-width: 0px 0px px 0px;border-style: solid;}.tatsu-idj30vd8iq4a8fih .tatsu-section-pad{padding: 50px 0% 90px 0%;}.tatsu-idj30vd8iq4a8fih.tatsu-section{margin: 0px 0px 0px 0px;}.tatsu-idj30vd8iq4a8fih > .tatsu-bottom-divider{z-index: 9999;}.tatsu-idj30vd8iq4a8fih > .tatsu-top-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-idj30vd8iq4a8fih{border-style: solid;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-idj30vd8iq4a8fih{border-style: solid;}}@media only screen and (max-width: 767px) {.tatsu-idj30vd8iq4a8fih{border-style: solid;}}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"https:\/\/www.irenevannispenkress.com\/index.php\/animated-image-module\/\" class=\"more-link style1-button\">Read More<\/a><\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-3352","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.irenevannispenkress.com\/index.php\/wp-json\/wp\/v2\/pages\/3352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.irenevannispenkress.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.irenevannispenkress.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.irenevannispenkress.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.irenevannispenkress.com\/index.php\/wp-json\/wp\/v2\/comments?post=3352"}],"version-history":[{"count":1,"href":"https:\/\/www.irenevannispenkress.com\/index.php\/wp-json\/wp\/v2\/pages\/3352\/revisions"}],"predecessor-version":[{"id":3901,"href":"https:\/\/www.irenevannispenkress.com\/index.php\/wp-json\/wp\/v2\/pages\/3352\/revisions\/3901"}],"wp:attachment":[{"href":"https:\/\/www.irenevannispenkress.com\/index.php\/wp-json\/wp\/v2\/media?parent=3352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}