Hoe to create a hover overlay effect on the Services blocks

1 reply·opened Oct 13, 2016
H
HOMEMAKERS_2015Oct 13, 2016

Hi there,

I have tried copying the hover overlay effect from the portfolio section but it does not work.
PLease can you advise what I need to do so that each individual block has a white layover effect that I can add text to.

Here is my dev site link:

http://www.homemakersmediagroup.co.za/ceilingboyz/one-page/op-section.html

Thanks in advance for your time.
Colleen

S
SemiColonWebSTAFFOct 14, 2016

Hello,

This is Definitely Possible. Please consider using the following Code for the Featured Boxes replacing the existing code:

<div class="col-md-4 col-sm-6 col-padding">
	<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
		<div class="fbox-icon">
			<a href="#"><i class="icon-et-mobile"></i></a>
		</div>
		<h3>Responsive Framework</h3>
	</div>
	<div class="overlay">
		<div class="overlay-wrap center" style="background-color: rgba(255,255,255,0.95);">
			<div class="vertical-middle">
				<h4 class="t400 uppercase ls1" style="margin-bottom: 15px;">Feature Title</h4>
				<p class="nobottommargin">Description</p>
			</div>
		</div>
	</div>
</div>

This will definitely work fine. 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