{"id":246,"date":"2015-07-26T06:01:46","date_gmt":"2015-07-26T06:01:46","guid":{"rendered":"http:\/\/docs.contentviewspro.com\/?p=246"},"modified":"2024-09-25T09:22:37","modified_gmt":"2024-09-25T09:22:37","password":"","slug":"display-content-on-hover","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/display-content-on-hover\/","title":{"rendered":"Show text on hover image"},"content":{"rendered":"\n<blockquote><p>This feature is only available in the <a href=\"https:\/\/www.contentviewspro.com\/#buynow\" target=\"_blank\" rel=\"noopener noreferrer\">Pro version<\/a>.<\/p><\/blockquote>\n\n\n<blockquote>\n<div><b>Notice:<\/b> The Animation tab is created for the first-generation layouts (&#8220;Grid&#8221; to &#8220;One and others&#8221;).<br \/>\nFor next-generation layouts (&#8220;Grid 2&#8221; to &#8220;Big Post 2&#8221;), the Animation tab is disabled. To create an overlay layout, please use Overlay layouts (Overlay 1, 2, &#8230;, 8).<\/div>\n<\/blockquote>\n<div><\/div>\n<p>In <strong>Animation<\/strong> tab, please select option &#8220;<strong>On hover<\/strong>&#8221; for the &#8220;Overlay Thumbnail With Text&#8221; setting.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1216\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2015\/07\/Overlay-on-hover.png\" alt=\"\" width=\"433\" height=\"217\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2015\/07\/Overlay-on-hover.png 433w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2015\/07\/Overlay-on-hover-300x150.png 300w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/p>\n<p>To change text color and background color of the overlay, please use <strong>Thumbnail Overlay<\/strong> setting in <strong>Style Settings<\/strong> tab:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1553\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2015\/07\/CVP-change-style-of-hover-box.png\" alt=\"\" width=\"567\" height=\"81\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2015\/07\/CVP-change-style-of-hover-box.png 567w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2015\/07\/CVP-change-style-of-hover-box-300x43.png 300w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/p>\n<p>To change the opacity of background color, please <a href=\"\/\/contentviewspro.com\/documentation\/article\/how-to-change-opacity-of-background-color\/\">check this document<\/a>.<\/p>\n<p>Thank you,<\/p>","protected":false},"excerpt":{"rendered":"<p>This feature is only available in the Pro version. Notice: The Animation tab is created for the first-generation layouts (&#8220;Grid&#8221; to &#8220;One and others&#8221;). For next-generation layouts (&#8220;Grid 2&#8221; to &#8220;Big Post 2&#8221;), the Animation tab is disabled. To create an overlay layout, please use Overlay layouts (Overlay 1, 2, &#8230;, 8). In Animation tab, &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/contentviewspro.com\/documentation\/article\/display-content-on-hover\/\"> <span class=\"screen-reader-text\">Show text on hover image<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"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":"","footnotes":""},"doc_category":[11],"doc_tag":[18],"class_list":["post-246","docs","type-docs","status-publish","hentry","doc_category-quick-guide","doc_tag-overlay"],"year_month":"2026-09","word_count":93,"total_views":"1","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"admin1","author_nicename":"admin1","author_url":"https:\/\/contentviewspro.com\/documentation\/author\/admin1\/"},"doc_category_info":[{"term_name":"Quick Guide","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/quick-guide\/"}],"doc_tag_info":[{"term_name":"overlay","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/overlay\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/comments?post=246"}],"version-history":[{"count":11,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/246\/revisions"}],"predecessor-version":[{"id":5971,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/246\/revisions\/5971"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=246"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}