Simply put,
I am working on a design where a gradient bar moves above a specific element when hovered, creating a visual effect of a triangle. I am now looking for a way to center an SVG inside the element on hover, to create a similar triangular gradient effect. It's a bit tricky to explain in text, so please refer to the screenshot and CodePen link below.
Click here to view the CodePen
<section class="small-business-split-header-block">
<div class="wrapper">
<h1 class="small-business-header">Your calls<br />answered brilliantly</h1>
<p class="small-business-sub-header">Our small business services ensure you capture every opportunity and make your business look bigger. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet semper ante. Ut vel odio.</p>
</div><!--wrapper-->
<div class="usp-bar">
<p class="usp-one active">Telephone Answering</p>
<span><img src="http://svgshare.com/i/y4.svg" /></span>
</div><!--usp-bar-->
</section>
<div class="usp-list cf">
<div class="usp active">
<a href="#">
<p>Need your own<br /><strong>dedicated PA?</strong></p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Looking for<br />an auto attendant?</p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Missing calls<br />on your mobile?</p>
</a>
</div><!--usp-->
<div class="usp">
<a href="#">
<p>Looking for a<br />business number?</p>
</a>
</div><!--usp-->
</div><!--usp-list-->