{"id":3284,"date":"2017-10-09T15:49:02","date_gmt":"2017-10-09T15:49:02","guid":{"rendered":"http:\/\/stopdesign.cn\/demo\/?page_id=3284"},"modified":"2019-10-24T03:38:29","modified_gmt":"2019-10-24T03:38:29","slug":"hover-card-v2","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/demo\/hover-card-v2\/","title":{"rendered":"Hover Card V2"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1457888013787{padding-top: 40px !important;padding-bottom: 80px !important;background-color: #ccd1d9 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-hovercardv2 cq-hovercardv2-horizontal1 cq-hovercardv2-iconsmall cq-hovercardv2-ps4 cq-hovercardv2-white  \" data-direction=\"horizontal1\" data-autodelay=\"5\" data-avatarwidth=\"64\" style=\"height:px\"><div class=\"cq-hovercardv2-imagecontainer\"><img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/03\/ben-o-sullivan-382817.jpg\" class=\"cq-hovercardv2-img\" alt=\"\" \/><\/div><div class=\"cq-hovercardv2-content\" style=\"background-color:\"><div class=\"cq-hovercardv2-contentcontainer\"><div class=\"cq-hovercardv2-avatar\">\n                          <img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/03\/photo-1454506185424-4098f059c9e9-128x128.jpeg\" class=\"cq-hovercardv2-avatarimage\" alt=\"\" \/>\n                       <\/div><h3 class=\"cq-hovercardv2-title\" style=\"font-size:;color:\">John Smith<br \/><span class=\"cq-hovercardv2-label\" style=\"font-size:;color:\">Web Developer<\/span><\/h3><p class=\"cq-hovercardv2-description\" style=\"color:\">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.<\/p><ul class=\"cq-hovercardv2-listcontainer\"><p><li class=\"cq-hovercardv2-listitem cq-hovercardv2-item\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"\" data-socialiconbgcolor=\"\"><a href=\"https:\/\/twitter.com\/flashstack\" title=\"twitter\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-twitter\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><li class=\"cq-hovercardv2-listitem cq-hovercardv2-item\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"\" data-socialiconbgcolor=\"\"><a href=\"http:\/\/youtube.com\" title=\"youtube\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon vc-oi vc-oi-play-circle2\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><li class=\"cq-hovercardv2-listitem cq-hovercardv2-item\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"\" data-socialiconbgcolor=\"\"><a href=\"https:\/\/1.envato.market\/EWO9W\" title=\"download\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-download\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><\/p>\n<\/ul><\/div><\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text]<\/p>\n<h4 style=\"font-size: 2em;\">Auto Delay Hover Card\u00a0Demo<\/h4>\n<p>Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl<\/p>\n<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1457888020908{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #f5f7fa !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][vc_column_text]<\/p>\n<h4 style=\"font-size: 2em;\">4 direction option<\/h4>\n<p>Mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl<\/p>\n<p>Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-hovercardv2 cq-hovercardv2-horizontal2 cq-hovercardv2-iconsmall cq-hovercardv2-ps6 cq-hovercardv2-grass  \" data-direction=\"horizontal2\" data-autodelay=\"0\" data-avatarwidth=\"80\" style=\"height:px\"><div class=\"cq-hovercardv2-imagecontainer\"><a href=\"https:\/\/1.envato.market\/EWO9W\" title=\"download\" target=\"\" rel=\"\" class=\"cq-hovercardv2-imagelink\" onclick=\"\"><img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2017\/10\/shttefan-284259.jpg\" class=\"cq-hovercardv2-img\" alt=\"\" \/><\/a><\/div><div class=\"cq-hovercardv2-content\" style=\"background-color:\"><div class=\"cq-hovercardv2-contentcontainer\"><div class=\"cq-hovercardv2-avatar\" style=\"background-color:;\"><i class=\"cq-hovercardv2-avataricon entypo-icon entypo-icon-user\" style=\"color:;\"><\/i><\/div><h3 class=\"cq-hovercardv2-title\" style=\"font-size:;color:\">John Smith<br \/><span class=\"cq-hovercardv2-label\" style=\"font-size:;color:\">Web Developer<\/span><\/h3><p class=\"cq-hovercardv2-description\" style=\"color:\">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.<\/p><ul class=\"cq-hovercardv2-listcontainer\"><\/ul><\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1458281615731{padding-top: 140px !important;padding-bottom: 180px !important;background-color: #aab2bd !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-hovercardv2 cq-hovercardv2-vertical1 cq-hovercardv2-iconsmall cq-hovercardv2-ps5 cq-hovercardv2-lavender  \" data-direction=\"vertical1\" data-autodelay=\"0\" data-avatarwidth=\"80\" style=\"height:px\"><div class=\"cq-hovercardv2-imagecontainer\"><a href=\"https:\/\/codecanyon.net\/item\/visual-composer-extensions-addon-all-in-one\/7731868?ref=sike\" title=\"download\" target=\"\" rel=\"\" class=\"cq-hovercardv2-imagelink\" onclick=\"\"><img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2017\/10\/nathan-mcbride-229639.jpg\" class=\"cq-hovercardv2-img\" alt=\"\" \/><\/a><\/div><div class=\"cq-hovercardv2-content\" style=\"background-color:\"><div class=\"cq-hovercardv2-contentcontainer\"><h3 class=\"cq-hovercardv2-title\" style=\"font-size:;color:#ffffff\">John Smith<br \/><span class=\"cq-hovercardv2-label\" style=\"font-size:;color:#ffffff\">Web Developer<\/span><\/h3><p class=\"cq-hovercardv2-description\" style=\"color:#ffffff\">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. <\/p><ul class=\"cq-hovercardv2-listcontainer\"><\/ul><\/div><\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text]<\/p>\n<h4 style=\"font-size: 2em;\">Optional social media icon under the text<\/h4>\n<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\n<p>Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1458289949548{padding-top: 140px !important;padding-bottom: 180px !important;background-color: #f2f6fd !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][vc_column_text]<\/p>\n<h4 style=\"font-size: 2em;\">Avatar support image or icon<\/h4>\n<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\n<p>Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-hovercardv2 cq-hovercardv2-vertical2 cq-hovercardv2-iconsmall cq-hovercardv2-ps4 cq-hovercardv2-lightgray  \" data-direction=\"vertical2\" data-autodelay=\"0\" data-avatarwidth=\"64\" style=\"height:px\"><div class=\"cq-hovercardv2-imagecontainer\"><img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2017\/10\/photo-nic-co-uk-nic-224385.jpg\" class=\"cq-hovercardv2-img\" alt=\"\" \/><\/div><div class=\"cq-hovercardv2-content\" style=\"background-color:\"><div class=\"cq-hovercardv2-contentcontainer\"><div class=\"cq-hovercardv2-avatar\" style=\"background-color:;\"><i class=\"cq-hovercardv2-avataricon entypo-icon entypo-icon-user\" style=\"color:;\"><\/i><\/div><p class=\"cq-hovercardv2-description\" style=\"color:\">There is 4 direction options, you can enable the auto delay hover too.<\/p><ul class=\"cq-hovercardv2-listcontainer\"><\/ul><\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1457875875872{padding-top: 100px !important;padding-bottom: 100px !important;background-color: #656d78 !important;}&#8221;][vc_column width=&#8221;1\/3&#8243;]<div class=\"cq-hovercardv2 cq-hovercardv2-horizontal2 cq-hovercardv2-iconsmall cq-hovercardv2-ps6 cq-hovercardv2-grapefruit  \" data-direction=\"horizontal2\" data-autodelay=\"5\" data-avatarwidth=\"64\" style=\"height:px\"><div class=\"cq-hovercardv2-imagecontainer\"><img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2017\/10\/shttefan-284259.jpg\" class=\"cq-hovercardv2-img\" alt=\"\" \/><\/div><div class=\"cq-hovercardv2-content\" style=\"background-color:\"><div class=\"cq-hovercardv2-contentcontainer\"><div class=\"cq-hovercardv2-avatar\" style=\"background-color:;\"><i class=\"cq-hovercardv2-avataricon entypo-icon entypo-icon-heart-empty\" style=\"color:;\"><\/i><\/div><h3 class=\"cq-hovercardv2-title\" style=\"font-size:;color:\">Hello Flower<\/h3><p class=\"cq-hovercardv2-description\" style=\"color:\">Yet another description.<\/p><ul class=\"cq-hovercardv2-listcontainer\"><p><li class=\"cq-hovercardv2-listitem cq-hovercardv2-itemmint\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"mint\" data-socialiconbgcolor=\"\"><a href=\"http:\/\/twitter.com\/flashstack\" title=\"twitter\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-twitter\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><li class=\"cq-hovercardv2-listitem cq-hovercardv2-itembluejeans\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"bluejeans\" data-socialiconbgcolor=\"\"><a href=\"https:\/\/facebook.com\" title=\"twitter\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-facebook-squared\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><\/p>\n<\/ul><\/div><\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/3&#8243;]<div class=\"cq-hovercardv2 cq-hovercardv2-horizontal1 cq-hovercardv2-iconsmall cq-hovercardv2-ps6 cq-hovercardv2-grass  \" data-direction=\"horizontal1\" data-autodelay=\"0\" data-avatarwidth=\"64\" style=\"height:px\"><div class=\"cq-hovercardv2-imagecontainer\"><img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2017\/10\/shttefan-284259.jpg\" class=\"cq-hovercardv2-img\" alt=\"\" \/><\/div><div class=\"cq-hovercardv2-content\" style=\"background-color:\"><div class=\"cq-hovercardv2-contentcontainer\"><div class=\"cq-hovercardv2-avatar\" style=\"background-color:;\"><i class=\"cq-hovercardv2-avataricon entypo-icon entypo-icon-heart-empty\" style=\"color:;\"><\/i><\/div><h3 class=\"cq-hovercardv2-title\" style=\"font-size:;color:\">Hello Flower<\/h3><p class=\"cq-hovercardv2-description\" style=\"color:\">Yet another description.<\/p><ul class=\"cq-hovercardv2-listcontainer\"><p><li class=\"cq-hovercardv2-listitem cq-hovercardv2-itemmint\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"mint\" data-socialiconbgcolor=\"\"><a href=\"http:\/\/twitter.com\/flashstack\" title=\"twitter\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-twitter\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><li class=\"cq-hovercardv2-listitem cq-hovercardv2-itembluejeans\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"bluejeans\" data-socialiconbgcolor=\"\"><a href=\"http:\/\/twitter.com\/flashstack\" title=\"twitter\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-facebook-squared\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><\/p>\n<\/ul><\/div><\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/3&#8243;]<div class=\"cq-hovercardv2 cq-hovercardv2-vertical1 cq-hovercardv2-iconsmall cq-hovercardv2-ps2 cq-hovercardv2-aqua  \" data-direction=\"vertical1\" data-autodelay=\"0\" data-avatarwidth=\"64\" style=\"height:px\"><div class=\"cq-hovercardv2-imagecontainer\"><img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2017\/10\/shttefan-284259.jpg\" class=\"cq-hovercardv2-img\" alt=\"\" \/><\/div><div class=\"cq-hovercardv2-content\" style=\"background-color:\"><div class=\"cq-hovercardv2-contentcontainer\"><div class=\"cq-hovercardv2-avatar\">\n                          <img src=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/04\/photo-1478070531059-3db579c041d5-128x128.jpg\" class=\"cq-hovercardv2-avatarimage\" alt=\"\" \/>\n                       <\/div><h3 class=\"cq-hovercardv2-title\" style=\"font-size:;color:\">Hello Flower<\/h3><p class=\"cq-hovercardv2-description\" style=\"color:\">Yet another description.<\/p><ul class=\"cq-hovercardv2-listcontainer\"><p><li class=\"cq-hovercardv2-listitem cq-hovercardv2-itemmint\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"mint\" data-socialiconbgcolor=\"\"><a href=\"http:\/\/twitter.com\/flashstack\" title=\"twitter\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-twitter\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><li class=\"cq-hovercardv2-listitem cq-hovercardv2-itembluejeans\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"bluejeans\" data-socialiconbgcolor=\"\"><a href=\"http:\/\/facebook.com\" title=\"facebook\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-facebook-squared\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><li class=\"cq-hovercardv2-listitem cq-hovercardv2-itempinkrose\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"pinkrose\" data-socialiconbgcolor=\"\"><a href=\"http:\/\/youtube.com\" title=\"youtube\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-play\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><li class=\"cq-hovercardv2-listitem cq-hovercardv2-itemlavender\" data-iconcolor=\"\" data-iconbgcolor=\"\" data-contentcolor=\"\" data-iconhoverbg=\"\" data-iconhovercolor=\"\" data-socialiconbg=\"lavender\" data-socialiconbgcolor=\"\"><a href=\"http:\/\/vimeo.com\" title=\"vimeo\" target=\"_blank\" rel=\"\" class=\"cq-hovercardv2-itemlink\" onclick=\"\"><div class=\"cq-hovercardv2-iconcontainer\"><i class=\"cq-hovercardv2-icon entypo-icon entypo-icon-vimeo-circled\" style=\"color:;font-size:;line-height:\"><\/i> <\/div><\/a><\/li><\/p>\n<\/ul><\/div><\/div><\/div>[\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1457888013787{padding-top: 40px !important;padding-bottom: 80px !important;background-color: #ccd1d9 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text] Auto Delay Hover Card\u00a0Demo Aliquam efficitur, eros rutrum sagittis tempor, mauris odio interdum tellus, eu placerat nisl urna quis justo. Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl I am text block. Click edit button [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/3284"}],"collection":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/comments?post=3284"}],"version-history":[{"count":25,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/3284\/revisions"}],"predecessor-version":[{"id":3706,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/3284\/revisions\/3706"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/media?parent=3284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}