<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } 
    .ht-click .s8_img {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
    }
    
    .ht-click .s8_content {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
        border-radius: 5px;
    }
        
    .ht-click .s8_content span {
        padding: 5px;
        overflow: hidden;
    }
    
    .ht-click .s8_content .heading {
        font-size: 20px;
    }
    
    .ht-click .s8_content .description {
        font-size: 12px;
    }
    
    .ht-click .s8_content.right {
        animation: 1s s8_translate_right;
    }
    
    .ht-click .s8_content.left {
        animation: 1s s8_translate_left;
    }
    
    @keyframes s8_translate_right {
        0% {
            transform: translateX(55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    
    @keyframes s8_translate_left {
        0% {
            transform: translateX(-55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    </style>
<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } 
    .ht-click .s8_img {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
    }
    
    .ht-click .s8_content {
        box-shadow: 2px 5px 10px rgba(0,0,0,.5);
        border-radius: 5px;
    }
        
    .ht-click .s8_content span {
        padding: 5px;
        overflow: hidden;
    }
    
    .ht-click .s8_content .heading {
        font-size: 20px;
    }
    
    .ht-click .s8_content .description {
        font-size: 12px;
    }
    
    .ht-click .s8_content.right {
        animation: 1s s8_translate_right;
    }
    
    .ht-click .s8_content.left {
        animation: 1s s8_translate_left;
    }
    
    @keyframes s8_translate_right {
        0% {
            transform: translateX(55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    
    @keyframes s8_translate_left {
        0% {
            transform: translateX(-55px)
        }
        100% {
            transform: translateX(0px)
        }
    }
    </style>
{"id":2187,"date":"2018-07-29T14:32:43","date_gmt":"2018-07-29T09:02:43","guid":{"rendered":"https:\/\/holithemes.com\/plugins\/click\/?p=2187"},"modified":"2018-07-29T14:32:43","modified_gmt":"2018-07-29T09:02:43","slug":"style-8","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click\/style-8\/","title":{"rendered":"Predefined Style-8"},"content":{"rendered":"\n<p>Image, When hover on image a content box will appear with animation.<\/p>\n\n\n<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } \r\n    .ht-click .s8_img {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n    }\r\n    \r\n    .ht-click .s8_content {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n        border-radius: 5px;\r\n    }\r\n        \r\n    .ht-click .s8_content span {\r\n        padding: 5px;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ht-click .s8_content .heading {\r\n        font-size: 20px;\r\n    }\r\n    \r\n    .ht-click .s8_content .description {\r\n        font-size: 12px;\r\n    }\r\n    \r\n    .ht-click .s8_content.right {\r\n        animation: 1s s8_translate_right;\r\n    }\r\n    \r\n    .ht-click .s8_content.left {\r\n        animation: 1s s8_translate_left;\r\n    }\r\n    \r\n    @keyframes s8_translate_right {\r\n        0% {\r\n            transform: translateX(55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    \r\n    @keyframes s8_translate_left {\r\n        0% {\r\n            transform: translateX(-55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    <\/style>\r\n    <div class=\"wca_shortcode ht-click ht-click-analytics style-8 style-8-sc\" style=\"  cursor: pointer; display: inline-flex; z-index: 9999; \"  data-htclick=\"style-8-sc\" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?phone=919494429789&text=https:\/\/holithemes.com\/plugins\/click\/style-8\/, Hello, How are you', '_blank'); \" >\r\n    \r\n    <div class=\"s8_cta\" style=\" display: -ms-flexbox; display: -webkit-flex; display: inline-flex; \">\r\n        <img decoding=\"async\" class=\"s8_img\" src=\" https:\/\/media.giphy.com\/media\/zSiEygkcONzyw\/giphy.gif\" style=\" height: 70px; width: 70px; z-index: 999999;  \" alt=\"whatsapp\">\r\n        <div class=\"s8_content  left\" style=\" flex-direction: column; justify-content: center; align-items: center;     background-color: #fff; border: 1px solid #ddd; height: 70px; width: 270px;  margin-left: -4px;\" >\r\n            <span class=\"heading\" style=\"color:  #000\"> WhatsApp us<\/span>\r\n            <span class=\"description\" style=\"color:  #000\"> We will response as soon as possible<\/span>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n\r\n    <\/div>\r\n    \n\n\n\n<p><br\/>To change the Predefined Style for Desktop, Mobile Devices.<\/p>\n\n\n\n<p>From plugin settings (Click), Change values for &#8220;Style for Desktop&#8221;, &#8220;Style for Mobile Devices&#8221;.<\/p>\n\n\n\n<p>This plugin\u00a0<a href=\"https:\/\/holithemes.com\/plugins\/click\/detect-device\/\">Detects the device<\/a>\u00a0based on HTTP User Agent.<\/p>\n\n\n\n<p>Select &#8220;<strong>Predefined Style-8<\/strong>&#8220;<\/p>\n\n\n\n<p>Click on &#8220;<strong>Save Changes<\/strong>&#8220;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"578\" height=\"266\" src=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/07\/style_8.png\" alt=\"\" class=\"wp-image-2292\" srcset=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/07\/style_8.png 578w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/07\/style_8-300x138.png 300w\" sizes=\"(max-width: 578px) 100vw, 578px\" \/><\/figure>\n\n\n\n<p><br\/>To Change the values of the Predefined Style-8,<\/p>\n\n\n\n<p><strong>Click<\/strong> -> <strong>Predefined Styles<\/strong> -> <strong>Style 8<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"722\" height=\"897\" src=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/08\/style-8.png\" alt=\"\" class=\"wp-image-2511\" srcset=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/08\/style-8.png 722w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/08\/style-8-241x300.png 241w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><\/figure>\n\n\n\n<p><strong><br\/>Text Line 1:<\/strong> To\u00a0change the text in the first line.<\/p>\n\n\n\n<p><strong>Text Line 2:<\/strong>\u00a0To change the text in the second line.<\/p>\n\n\n\n<p><strong>Text Color Line 1:<\/strong>\u00a0To change the text color in the first line.<\/p>\n\n\n\n<p><strong>Text Color Line 2:<\/strong> To change the text color in the second line.<\/p>\n\n\n\n<p><strong>Background Color:<\/strong> To change the Background color.<\/p>\n\n\n\n<p><strong>Content box Border Color:<\/strong> To change the Content box Border color.<\/p>\n\n\n\n<p><strong>Image URL<\/strong>: If this field is left blank, a default image will be added.<br\/>To change the image, add the image URL in this field.<\/p>\n\n\n\n<p>[ Make sure that the values of Image Height, Image Width, and Content Height are over 70px ]<\/p>\n\n\n\n<p><strong>Image Height:<\/strong> To change the Image Height. ( The values of\u00a0Image Height and\u00a0Content Height should be equal )<\/p>\n\n\n\n<p><strong>Image Width:<\/strong>\u00a0To change the Image Width.<\/p>\n\n\n\n<p><strong>Content Height:<\/strong>\u00a0To change the Content Height.\u00a0( The values of Image Height and Content Height should be equal )<\/p>\n\n\n\n<p><strong>Content Width:<\/strong>\u00a0To change the Content Width.<\/p>\n\n\n\n<p><strong>Image Position:<\/strong> To change the position of the image.\u00a0<br\/>If style position is right to screen then select right, if left to screen then select left.<\/p>\n\n\n\n<p>For Example: If floating style position is set to bottom-right or top-right<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"599\" height=\"459\" src=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/07\/position_to_place.png\" alt=\"\" class=\"wp-image-2456\" srcset=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/07\/position_to_place.png 599w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/07\/position_to_place-300x230.png 300w\" sizes=\"(max-width: 599px) 100vw, 599px\" \/><\/figure>\n\n\n\n<p><br\/>and at\u00a0 Click -> Predefined Style &#8211; 8<\/p>\n\n\n\n<p>Select the Image Position as &#8220;Right&#8221; to display the image on the right and content box on the left.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"537\" height=\"120\" src=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/07\/image_position.png\" alt=\"\" class=\"wp-image-2457\" srcset=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/07\/image_position.png 537w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/07\/image_position-300x67.png 300w\" sizes=\"(max-width: 537px) 100vw, 537px\" \/><\/figure>\n\n\n\n<p><br\/>or<\/p>\n\n\n\n<p>If floating style position is set to bottom-left or top-left, then select image position to &#8220;left&#8221; to display the image at left and content box on the right.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"854\" height=\"163\" src=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/08\/image_position_left.png\" alt=\"\" class=\"wp-image-2518\" srcset=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/08\/image_position_left.png 854w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/08\/image_position_left-300x57.png 300w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/08\/image_position_left-768x147.png 768w\" sizes=\"(max-width: 854px) 100vw, 854px\" \/><\/figure>\n\n\n\n<p>\u00a0<\/p>\n\n\n<style>.ht-click .s8_content { display: none; } .ht-click .s8_cta:hover .s8_content { display: inline-flex; } \r\n    .ht-click .s8_img {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n    }\r\n    \r\n    .ht-click .s8_content {\r\n        box-shadow: 2px 5px 10px rgba(0,0,0,.5);\r\n        border-radius: 5px;\r\n    }\r\n        \r\n    .ht-click .s8_content span {\r\n        padding: 5px;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ht-click .s8_content .heading {\r\n        font-size: 20px;\r\n    }\r\n    \r\n    .ht-click .s8_content .description {\r\n        font-size: 12px;\r\n    }\r\n    \r\n    .ht-click .s8_content.right {\r\n        animation: 1s s8_translate_right;\r\n    }\r\n    \r\n    .ht-click .s8_content.left {\r\n        animation: 1s s8_translate_left;\r\n    }\r\n    \r\n    @keyframes s8_translate_right {\r\n        0% {\r\n            transform: translateX(55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    \r\n    @keyframes s8_translate_left {\r\n        0% {\r\n            transform: translateX(-55px)\r\n        }\r\n        100% {\r\n            transform: translateX(0px)\r\n        }\r\n    }\r\n    <\/style>\r\n    <div class=\"wca_shortcode ht-click ht-click-analytics style-8 style-8-sc\" style=\" position:fixed;;right:40px;bottom:40px;; cursor: pointer; display: inline-flex; z-index: 9999; \"  data-htclick=\"style-8-sc\" onclick=\" window.open('https:\/\/api.whatsapp.com\/send?phone=919494429789&text=https:\/\/holithemes.com\/plugins\/click\/style-8\/, Hello, How are you', '_blank'); \" >\r\n    \r\n    <div class=\"s8_cta\" style=\" display: -ms-flexbox; display: -webkit-flex; display: inline-flex; \">\r\n        <img decoding=\"async\" class=\"s8_img\" src=\" https:\/\/picsum.photos\/200\/300?image=0\" style=\" height: 70px; width: 70px; z-index: 999999;  order: 1;\" alt=\"whatsapp\">\r\n        <div class=\"s8_content  right\" style=\" flex-direction: column; justify-content: center; align-items: center;     background-color: #fff; border: 1px solid #ddd; height: 70px; width: 270px;  margin-right: -4px;\" >\r\n            <span class=\"heading\" style=\"color:  #000\"> WhatsApp us<\/span>\r\n            <span class=\"description\" style=\"color:  #000\"> We will response as soon as possible<\/span>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n\r\n    <\/div>\r\n    \n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Source: <br\/>GIF Image: <a rel=\"nofollow\" href=\"https:\/\/media.giphy.com\/media\/zSiEygkcONzyw\/giphy.gif\">Giphy<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image, When hover on image a content box will appear with animation. To change the Predefined Style for Desktop, Mobile Devices. From plugin settings (Click), Change values for &#8220;Style for Desktop&#8221;, &#8220;Style for Mobile Devices&#8221;. This plugin\u00a0Detects the device\u00a0based on HTTP User Agent. Select &#8220;Predefined Style-8&#8220; Click on &#8220;Save Changes&#8220; To Change the values of &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/holithemes.com\/plugins\/click\/style-8\/\"> <span class=\"screen-reader-text\">Predefined Style-8<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-2187","post","type-post","status-publish","format-standard","hentry","category-docs","category-styles"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/2187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/comments?post=2187"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/2187\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/media?parent=2187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/categories?post=2187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/tags?post=2187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}