{"id":4588,"date":"2021-08-12T11:43:59","date_gmt":"2021-08-12T11:43:59","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=4588"},"modified":"2021-08-13T09:17:06","modified_gmt":"2021-08-13T09:17:06","slug":"tattoo-slider-layout-18","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/tattoo-slider-layout-18\/","title":{"rendered":"Tattoo Image Slider"},"content":{"rendered":"<p>[vc_row][vc_column][vc_empty_space height=&#8221;50px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text el_id=&#8221;#sf-position&#8221;]<style>\r\n.sf-18-container{\r\n\toverflow:hidden;\r\n\tfont-size:16px;\r\n\tfont-family: 'Montserrat', sans-serif;\r\n}\r\n\r\n#wrap{\r\n\tposition:absolute;\r\n\tleft:0; top:0;\r\n\twidth:150%;\r\n\theight:100%;\r\n\tdisplay:flex;\r\n\talign-items:stretch;\r\n\tmargin:0 25%;\r\n}\r\n.sf-18-container .hb {\r\n\tposition:relative;\r\n\twidth:25%;\r\n\tz-index:1;\r\n\tdisplay:flex;\r\n\talign-items:center;\r\n\tz-index:2;\r\n\ttrasnform:scale(.97);\r\n}\r\n.sf-18-container .c{\r\n\tposition:relative;\r\n\tdisplay:block;\r\n\tmax-width:90%;\r\n}\r\n.sf-18-container .c img {\r\n\tposition:relative;\r\n\tdisplay:block;\r\n\twidth: 100% ! important;   \/\/default is 100% \r\n\theight: auto ! important;  \/\/default is auto\r\n\tz-index:2;\r\n}\r\n.sf-18-container .txt {\r\n\tposition:absolute;\r\n\ttop:100%; left:10%;\r\n\twidth:80%;\r\n\topacity:0;\r\n\tpadding:1em 0 0 1em;\r\n\tborder-left:1px solid;\r\n\tz-index:1;\r\n\ttransform:scaleY(1) translateY(999px);\r\n\ttransition:transform .2s, opacity .5s;\r\n\tcolor: #ffffff ! important;\r\n}\r\n.sf-18-container h1 {\r\n  color: #ffffff ! important;\r\n  font-size:1.2em;\r\n  font-weight:700;\r\n  text-transform:uppercase;\r\n}\r\n\r\n.sf-18-container p {\r\n\tcolor: #ffffff ! important;\r\n\tfont-size:1em;\r\n}\r\n\r\n.sf-18-container .hb:hover .txt {\r\n  opacity:1;\r\n  transform:scaleY(1) translateY(0);\r\n}\r\n.sf-18-container .fullBg {\r\n  position:fixed;top:0;left:0;width:100%;height:100%;\r\n  opacity:0;\r\n  transition:transform .5s, opacity .5s;\r\n  transform:scale(1);\r\n  z-index:-999;\r\n}\r\n.sf-18-container .fullBg img {\r\n  width:100%;height:100%;\r\n  object-fit:cover;object-position:center;\r\n  opacity: 1;\r\n}\r\n.sf-18-container .hb:hover + .fullBg {opacity:1;transform:scale(1.12);}\r\n\r\n\/* Additional CSS *\/\r\n\r\n.sf-18-slide-button-1, .sf-18-slide-button-2{\r\n\tbackground-color: #F1F1F1; \r\n\tcolor: black;\r\n\tborder: none; \r\n\tcursor: pointer; \r\n\tborder-radius: 0px; \r\n\ttext-align: center; \r\n\tpadding: 5px 15px; \r\n\ttransition: all .3s;\r\n\ttransition: all .3s;\r\n\tmargin-top: 25px !important;\r\n\tmargin-right: 6px;\r\n}\r\n\r\n.sf-18-slide-button-1:hover, .sf-18-slide-button-2:hover { \r\n\tbackground-color: #3E3D3D; \r\n\tcolor: #eeebdd; \r\n}\r\n\r\n@media only screen and (min-width: 769px) and (max-width: 1024px) {\r\n\t.sf-18-container h1 {\r\n\t\tfont-size:1em;\r\n\t}\r\n\r\n\t.sf-18-container p {\r\n\t\tfont-size:0.8em;\r\n\t}\r\n\t.sf-18-slide-button-1, .sf-18-slide-button-2{\r\n\t\tfont-size:0.8em;\r\n\t}\r\n}\r\n\r\n@media only screen and (min-width: 568px) and (max-width: 769px) {\r\n\t.sf-18-container h1 {\r\n\t\tfont-size:0.8em;\r\n\t}\r\n\r\n\t.sf-18-container p {\r\n\t\tfont-size:0.6em;\r\n\t}\r\n\t.sf-18-slide-button-1, .sf-18-slide-button-2{\r\n\t\tfont-size:0.6em;\r\n\t}\r\n}\r\n\r\n@media only screen and (min-width: 320px) and (max-width: 568px) {\r\n\t.sf-18-container h1 {\r\n\t\tfont-size:0.6em;\r\n\t}\r\n\r\n\t.sf-18-container p {\r\n\tdisplay:none;\r\n\t}\r\n\t.sf-18-slide-button-1, .sf-18-slide-button-2{\r\n\t\tfont-size:0.6em;\r\n\t}\r\n}\r\n\r\n@media only screen and (max-width: 320px) {\r\n\t.sf-18-container h1 {\r\n\t\tfont-size:0.4em;\r\n\t}\r\n\r\n\t.sf-18-container p {\r\n\t\tdisplay:none;\r\n\t}\r\n\t.sf-18-slide-button-1, .sf-18-slide-button-2{\r\n\t\tfont-size:0.4em;\r\n\t}\r\n}\r\n\r\n\r\nbody { background-image: url(https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/smokey-eye-model-with-rose-tattoo-shoulder.jpg) ; height : 100%; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; overflow: hidden;} .sf-18-container .txt { \/*background: #ffffff54;*\/ padding: 10px !important; } .sf-18-container .txt h1, .sf-18-container .txt p{ color: #ededed !important; font-weight: bold; text-shadow: 3px 3px 6px rgb(0 0 0 \/ 79%); } .sf-18-container .c img { border-radius: 10%; box-shadow: 6px 5px 20px -3px rgba(0,0,0,0.69); -webkit-box-shadow: 6px 5px 20px -3px rgba(0,0,0,0.69); -moz-box-shadow: 6px 5px 20px -3px rgba(0,0,0,0.69); }<\/style>\r\n<div class=\"sf-18-container\">\r\n\r\n\t <div id=\"wrap\">\r\n\t \t  <div class=\"hb\">\r\n\t\t<div class=\"c\">\r\n\t\t  <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/indoor-shot-attractive-cocky-young-tattooed-woman-with-foxy-hair-looking-self-confidently-camera-while-standing-against-white-background-casual-wear.jpg\" alt=\"\"\/>\r\n\t\t  <div class=\"txt\">\r\n\t\t\t<h1>\r\n\t\t\t\t\t\t\t<\/h1>\r\n\t\t\t<p>\r\n\t\t\t\tTattoo Image 1\t\t\t<\/p>\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t<\/div>\r\n\t  <\/div>\r\n\t  <div class=\"fullBg\">\r\n\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/indoor-shot-attractive-cocky-young-tattooed-woman-with-foxy-hair-looking-self-confidently-camera-while-standing-against-white-background-casual-wear.jpg\" alt=\"\"\/>\r\n\t  <\/div>\r\n\t\t\t\t\t  <div class=\"hb\">\r\n\t\t<div class=\"c\">\r\n\t\t  <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/medium-shot-man-with-tattoos-outsode.jpg\" alt=\"\"\/>\r\n\t\t  <div class=\"txt\">\r\n\t\t\t<h1>\r\n\t\t\t\t\t\t\t<\/h1>\r\n\t\t\t<p>\r\n\t\t\t\tTattoo Image 2\t\t\t<\/p>\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t<\/div>\r\n\t  <\/div>\r\n\t  <div class=\"fullBg\">\r\n\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/medium-shot-man-with-tattoos-outsode.jpg\" alt=\"\"\/>\r\n\t  <\/div>\r\n\t\t\t\t\t  <div class=\"hb\">\r\n\t\t<div class=\"c\">\r\n\t\t  <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/medium-shot-woman-with-tattoos-back.jpg\" alt=\"\"\/>\r\n\t\t  <div class=\"txt\">\r\n\t\t\t<h1>\r\n\t\t\t\t\t\t\t<\/h1>\r\n\t\t\t<p>\r\n\t\t\t\tTattoo Image 3\t\t\t<\/p>\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t<\/div>\r\n\t  <\/div>\r\n\t  <div class=\"fullBg\">\r\n\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/medium-shot-woman-with-tattoos-back.jpg\" alt=\"\"\/>\r\n\t  <\/div>\r\n\t\t\t\t\t  <div class=\"hb\">\r\n\t\t<div class=\"c\">\r\n\t\t  <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/smokey-eye-model-with-rose-tattoo-shoulder.jpg\" alt=\"\"\/>\r\n\t\t  <div class=\"txt\">\r\n\t\t\t<h1>\r\n\t\t\t\t\t\t\t<\/h1>\r\n\t\t\t<p>\r\n\t\t\t\tTattoo Image 4\t\t\t<\/p>\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t<\/div>\r\n\t  <\/div>\r\n\t  <div class=\"fullBg\">\r\n\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/smokey-eye-model-with-rose-tattoo-shoulder.jpg\" alt=\"\"\/>\r\n\t  <\/div>\r\n\t\t\t\t\t  <div class=\"hb\">\r\n\t\t<div class=\"c\">\r\n\t\t  <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/tattooed-man-with-headphones-against-blue-sky-ocean.jpg\" alt=\"\"\/>\r\n\t\t  <div class=\"txt\">\r\n\t\t\t<h1>\r\n\t\t\t\t\t\t\t<\/h1>\r\n\t\t\t<p>\r\n\t\t\t\tTattoo Image 5\t\t\t<\/p>\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t<\/div>\r\n\t  <\/div>\r\n\t  <div class=\"fullBg\">\r\n\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/tattooed-man-with-headphones-against-blue-sky-ocean.jpg\" alt=\"\"\/>\r\n\t  <\/div>\r\n\t\t\t\t\t  <div class=\"hb\">\r\n\t\t<div class=\"c\">\r\n\t\t  <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/young-attractive-caucasian-female-with-tattoos-standing-park-making-cute-face.jpg\" alt=\"\"\/>\r\n\t\t  <div class=\"txt\">\r\n\t\t\t<h1>\r\n\t\t\t\t\t\t\t<\/h1>\r\n\t\t\t<p>\r\n\t\t\t\tTattoo Image 6\t\t\t<\/p>\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t<\/div>\r\n\t  <\/div>\r\n\t  <div class=\"fullBg\">\r\n\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/young-attractive-caucasian-female-with-tattoos-standing-park-making-cute-face.jpg\" alt=\"\"\/>\r\n\t  <\/div>\r\n\t\t\t\t\t  <div class=\"hb\">\r\n\t\t<div class=\"c\">\r\n\t\t  <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/young-woman-bed-morning.jpg\" alt=\"\"\/>\r\n\t\t  <div class=\"txt\">\r\n\t\t\t<h1>\r\n\t\t\t\t\t\t\t<\/h1>\r\n\t\t\t<p>\r\n\t\t\t\tTattoo Image 7\t\t\t<\/p>\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t  <\/div>\r\n\t\t<\/div>\r\n\t  <\/div>\r\n\t  <div class=\"fullBg\">\r\n\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/young-woman-bed-morning.jpg\" alt=\"\"\/>\r\n\t  <\/div>\r\n\t\t\t\t\t<\/div>\r\n\r\n<\/div> \r\n\r\n<script>\r\njQuery(document).ready(function(){\r\n\tvar docWidth = jQuery('body').width(),\r\n\t\t$wrap = jQuery('#wrap'),\r\n\t\t$images = jQuery('#wrap .hb'),\r\n\t\tslidesWidth = $wrap.width();\r\n  \r\n\tjQuery(window).on('resize', function(){\r\n\t\tdocWidth = jQuery('body').width();\r\n\t\tslidesWidth = $wrap.width();\r\n\t})\r\n  \r\n\tjQuery(document).mousemove(function(e) {\r\n\t\tvar mouseX = e.pageX,\r\n\t\t\toffset = mouseX \/ docWidth * slidesWidth - mouseX \/ 2;\r\n\t\t$images.css({\r\n\t\t'-webkit-transform': 'translate3d(' + -offset + 'px,0,0)',\r\n\t\t\t\t'transform': 'translate3d(' + -offset + 'px,0,0)'\r\n\t\t});\r\n\t});\r\n})\r\n<\/script>\r\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text el_id=&#8221;text-con&#8221;]<span style=\"color: #ededed;\"><strong>\u00a0 \u00a0 The word tattoo, or tattow in the 18th century, is a loanword from the Samoan word tatau, meaning &#8220;to strike&#8221;. A tattoo is a type of body art that is permanent. The skin is punctured with needles, and ink, dyes, and pigments are injected into the deep layer of the skin to create a design.<\/strong><\/span><\/p>\n<p><span style=\"color: #ededed;\"><strong>\u00a0 \u00a0 Tattoos used to be done by hand, with the tattoo artist puncturing the skin with a needle and manually injecting the ink. Professional tattoo artists use tattoo machines, even though this method is still employed in some regions of the world. A tattoo machine powers the needles up and down as ink is deposited in the skin.<\/strong><\/span>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_empty_space height=&#8221;50px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text el_id=&#8221;#sf-position&#8221;][\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text el_id=&#8221;text-con&#8221;]\u00a0 \u00a0 The word tattoo, or tattow in the 18th century, is a loanword from the Samoan word tatau, meaning &#8220;to strike&#8221;. A tattoo is a type of body art that is permanent. The skin is punctured with needles, and ink, dyes, and pigments are injected into the deep layer of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4588","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/4588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/comments?post=4588"}],"version-history":[{"count":14,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/4588\/revisions"}],"predecessor-version":[{"id":4619,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/4588\/revisions\/4619"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=4588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}