<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>overlay &#8211; Content Views Pro</title>
	<atom:link href="https://contentviewspro.com/documentation/tags/overlay/feed/" rel="self" type="application/rss+xml" />
	<link>https://contentviewspro.com/documentation</link>
	<description>Most Popular Filter &#38; Grid Plugin For WordPress</description>
	<lastBuildDate>Wed, 25 Sep 2024 09:22:37 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>Show overlay text on image permanently</title>
		<link>https://contentviewspro.com/documentation/article/overlay-image-title-content-permanently/</link>
		
		<dc:creator><![CDATA[CVP]]></dc:creator>
		<pubDate>Tue, 22 Aug 2017 03:45:47 +0000</pubDate>
				<guid isPermaLink="false">http://docs.contentviewspro.com/?p=1954</guid>

					<description><![CDATA[Content Views Pro helps you to show title, content&#8230; on hover image easily (read more here). It also can help you to overlay image with title, content&#8230; permanently without any line of code. 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 &#8230;<p class="read-more"> <a class="" href="https://contentviewspro.com/documentation/article/overlay-image-title-content-permanently/"> <span class="screen-reader-text">Show overlay text on image permanently</span> Read More &#187;</a></p>]]></description>
										<content:encoded><![CDATA[<p>Content Views Pro helps you to show title, content&#8230; on hover image easily (<a href="//contentviewspro.com/documentation/article/display-content-on-hover/" target="_blank" rel="noopener noreferrer">read more here</a>).<br />
It also can help you to overlay image with title, content&#8230; permanently without any line of code.</p>
<blockquote>
<div><b>Notice:</b> The Animation tab is created for the first-generation layouts (&#8220;Grid&#8221; to &#8220;One and others&#8221;).<br />
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).</div>
</blockquote>
<p>In <strong>Animation</strong> tab, please select &#8220;<strong>Always</strong>&#8221; option for the “Overlay Thumbnail With Text” setting.</p>
<p><img fetchpriority="high" decoding="async" class="alignnone size-full wp-image-1955" src="https://contentviewspro.com/documentation/wp-content/uploads/2017/08/CVPro-overlay-permanently.png" alt="Content Views Pro - overlay permanently" width="564" height="371" srcset="https://contentviewspro.com/documentation/wp-content/uploads/2017/08/CVPro-overlay-permanently.png 564w, https://contentviewspro.com/documentation/wp-content/uploads/2017/08/CVPro-overlay-permanently-300x197.png 300w" sizes="(max-width: 564px) 100vw, 564px" /></p>
<p>You can customize the position of the overlay easily with the &#8220;Overlay Position&#8221; setting.</p>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Overlay thumbnail with (or without) text</title>
		<link>https://contentviewspro.com/documentation/article/overlay-thumbnail-text/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Tue, 25 Oct 2016 11:37:18 +0000</pubDate>
				<guid isPermaLink="false">http://docs.contentviewspro.com/?p=994</guid>

					<description><![CDATA[Since CVP 3.9.9, it is easy to overlay thumbnail with text. You can show overlay always, on hover or disable it. Also, you can change position of overlay text as top, middle, bottom of thumbnail. Requirement Please ensure to select the Show Title or Show Content checkbox in Display Settings >> Fields Settings. Otherwise, there &#8230;<p class="read-more"> <a class="" href="https://contentviewspro.com/documentation/article/overlay-thumbnail-text/"> <span class="screen-reader-text">Overlay thumbnail with (or without) text</span> Read More &#187;</a></p>]]></description>
										<content:encoded><![CDATA[<p>Since CVP 3.9.9, it is easy to overlay thumbnail with text.</p>
<p><img decoding="async" src="https://contentviewspro.com/documentation/wp-content/uploads/2016/10/Overlay-CVP-3.9.9.png" alt="Overlay setting CVP 3.9.9" width="616" height="212" class="aligncenter size-full wp-image-995" srcset="https://contentviewspro.com/documentation/wp-content/uploads/2016/10/Overlay-CVP-3.9.9.png 616w, https://contentviewspro.com/documentation/wp-content/uploads/2016/10/Overlay-CVP-3.9.9-300x103.png 300w" sizes="(max-width: 616px) 100vw, 616px" /></p>
<p>You can show overlay always, on hover or disable it.<br />
Also, you can change position of overlay text as top, middle, bottom of thumbnail.</p>
<h2>Requirement</h2>
<p>Please ensure to select the <code>Show Title</code> or <code>Show Content</code> checkbox in Display Settings >> Fields Settings. Otherwise, there is nothing to show in the overlay.</p>
<h2 id="wotext">Overlay without text</h2>
<p>For now, overlay always require text. The workaround to show overlay without text is setting transparent color for the text in the overlay:</p>
<ul>
<li>select only 2 checkboxes: <code>Show Thumbnail</code> and <code>Show Title</code> in Display Settings >> Fields Settings</li>
<li>use this text<br />
<code>transparent</code><br />
as value of Style Settings > Title > Text Color</li>
</ul>
<p>Best regards,</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Show text on hover image</title>
		<link>https://contentviewspro.com/documentation/article/display-content-on-hover/</link>
		
		<dc:creator><![CDATA[admin1]]></dc:creator>
		<pubDate>Sun, 26 Jul 2015 06:01:46 +0000</pubDate>
				<guid isPermaLink="false">http://docs.contentviewspro.com/?p=246</guid>

					<description><![CDATA[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, &#8230;<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 &#187;</a></p>]]></description>
										<content:encoded><![CDATA[
<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>


<blockquote>
<div><b>Notice:</b> The Animation tab is created for the first-generation layouts (&#8220;Grid&#8221; to &#8220;One and others&#8221;).<br />
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).</div>
</blockquote>
<div></div>
<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 />
<img 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="(max-width: 433px) 100vw, 433px" /></p>
<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 />
<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>
<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>
<p>Thank you,</p>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
