Parallex image and Flex slider issue

3 replies·opened Dec 31, 2016
H
hopefull112Dec 31, 2016

I just purchased my 4th canvas license! Awesome template!

This is the new website I am building for a new client: http://joncornlaw.com.s3-website-us-west-2.amazonaws.com/

I am having a issue. I need to show a transparent flex slider of text slides over a parallex image like in this website http://www.coastlawgroup.com/. Scroll down to the middle and you will see a parallex picture and a text slider over it. Please check my website http://joncornlaw.com.s3-website-us-west-2.amazonaws.com/ and I having difficulty doing that. I want the black background of the flex slider cover 90% of the background image and the text should be nicely visible. Please let me know how to do this.

Thanks,
Muneer

S
SemiColonWebSTAFFJan 2, 2017

Hello,

Thank You so much for your Continued Support to Canvas and for the Kind Words! We Truly Appreciate them! :)

Actually, a custom Color has been set for the Testimonials Text in the demos/app-landing/app-landing.css File. Simply find the following code in the demos/app-landing/app-landing.css File:

.testimonial-full .testi-content p {
	font-size: 28px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	letter-spacing: -1px;
	word-spacing: 2px;
	color: #777;
	font-style: normal;
	margin: 15px 0 30px 0;
	line-height: 1.6;
}

and delete the color: #777; CSS Property. Additionally, add the following CSS Code:

.dark .testi-meta span { color: #CCC; }

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.

S
SemiColonWebSTAFFJan 4, 2017

Hello,

This is Definitely Possible. Consider using the following code:

<div class="section parallax dark nobottommargin notopmargin" style="background-image: url('images/surf.jpg'); padding: 60px 0;" data-stellar-background-ratio="0.4">

	<div class="container clearfix">
		<div style="background-color: rgba(0,0,0,0.5); height: 600px;">

			<div class="fslider testimonial testimonial-full nobg noborder noshadow vertical-middle" data-animation="fade" data-arrows="false">
				<div class="flexslider">
					<div class="slider-wrap">
						<div class="slide">
							<div class="testi-content">
								<p>Similique fugit repellendus expedita excepturi iure perferendis provident quia eaque. Repellendus, vero numquam?</p>
								<div class="testi-meta">
									Steve Jobs
									<span>Apple Inc.</span>
								</div>
							</div>
						</div>
						<div class="slide">

							<div class="testi-content">
								<p>Natus voluptatum enim quod necessitatibus quis expedita harum provident eos obcaecati id culpa corporis molestias.</p>
								<div class="testi-meta">
									Collis Ta'eed
									<span>Envato Inc.</span>
								</div>
							</div>
						</div>
						<div class="slide">

							<div class="testi-content">
								<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
								<div class="testi-meta">
									John Doe
									<span>XYZ Inc.</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</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.

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