user_mobilelogo

See all 6 examples below by hovering over each image.  To use an image effect of your choice simply copy the code snippet under the image into the Html of your article or custom html module.  Edit the src path to your image and edit the Href tag to point to the page you want to link too in your site.

Image Effect 1

<div id="effect-1" class="effects clearfix">
<div class="img"><img style="display: block; margin-left: auto; margin-right: auto;" src="/joomlage_0093/images/your-image.jpg" alt="" />
<div class="overlay"><a class="expand" href="#">+</a> <a class="close-overlay hidden">x</a></div>
</div>
</div>

Image Effect 2

<div id="effect-2" class="effects clearfix">
<div class="img"><img style="display: block; margin-left: auto; margin-right: auto;" src="/joomlage_0093/images/your-image.jpg" alt="" />
<div class="overlay"><a class="expand" href="#">+</a> <a class="close-overlay hidden">x</a></div>
</div>
</div>

Image Effect 3

<div id="effect-3" class="effects clearfix">
<div class="img"><img style="display: block; margin-left: auto; margin-right: auto;" src="/joomlage_0093/images/your-image.jpg" alt="" />
<div class="overlay"><a class="expand" href="#">+</a> <a class="close-overlay hidden">x</a></div>
</div>
</div>

Image Effect 4

<div id="effect-4" class="effects clearfix">
<div class="img"><img style="display: block; margin-left: auto; margin-right: auto;" src="/joomlage_0093/images/your-image.jpg" alt="" />
<div class="overlay"><a class="expand" href="#">+</a> <a class="close-overlay hidden">x</a></div>
</div>
</div>

Image Effect 5

<div id="effect-5" class="effects clearfix">
<div class="img"><img style="display: block; margin-left: auto; margin-right: auto;" src="/joomlage_0093/images/your-image.jpg" alt="" />
<div class="overlay"><a class="expand" href="#">+</a> <a class="close-overlay hidden">x</a></div>
</div>
</div>

Image Effect 6

<div id="effect-6" class="effects clearfix">
<div class="img"><img style="display: block; margin-left: auto; margin-right: auto;" src="/joomlage_0093/images/your-image.jpg" alt="" />
<div class="overlay"><a class="expand" href="#">+</a> <a class="close-overlay hidden">x</a></div>
</div>
</div>

New Clients

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation. Mollit anim id est laborum.