Canvas Support

Flex slider overlay

5 replies·opened Jul 31, 2019
S
SemiColonWebSTAFFJul 31, 2019

Hello,

You can consider using the following code: 

<div class="fslider">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide"><img src="images/portfolio/single/full/1.jpg" alt="Slider 1"></div>
			<div class="slide"><img src="images/portfolio/single/full/7.jpg" alt="Slider 2"></div>
			<div class="slide"><img src="images/portfolio/single/full/10.jpg" alt="Slider 3"></div>
		</div>
	</div>
	<div class="overlay">
		<div class="text-overlay nobg" style="opacity: 1; top: 0; padding: 25px;">
			<span class="badge badge-danger" style="font-size: 18px;">On Sale!</span>
		</div>
	</div>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

N
nikoslavsJul 31, 2019

thank you, and can I add another PNG file as overlay also?

S
SemiColonWebSTAFFAug 1, 2019

Hello,

Sure! You can customize the codes according to your needs by placing the PNG inside the .text-overlay DIV and then styling it with CSS.

Unfortunately, customizations are not included in Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .

Let us know if we can help you with anything else or if you find any further issues.

N
nikoslavsAug 2, 2019

Thank you very much for detailed response.

One more questions, hot to set text overlay to be visible at all time, not fading in and out while scrolling through flexslider?

Thanks in advance

S
SemiColonWebSTAFFAug 5, 2019

Hello,

Simply use the following code: 

<div class="overlay" style="z-index:2;">

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard