Image Overlays

Image Overlays

  • 9 different Overlay Colors
  • Make the whole Element to a Link, no matter which one
  • Nice Animation on Hover
  • Optional Caption available
  • Works with Lightbox, external Links, Lightbox and more
  • Simple Shortcode and works with every Image

Image Overlay Samples

Image Overlay Colors

Image Overlay Variations

Image Overlay Forms

Minimal Shortcode

{overlay image="images/image.jpg" link=""}

Shortcode with some Options

{overlay image="images/image.jpg" link="images/image-large.jpg" icon="fa-heart" lightbox="yes" caption="My awesome Caption"}
Parameter Name Description Possible values Default
image The Main Image for the Overlay, use Image Button to find the path for it A placeholder Picture
icon Choose a Icon for the Icon Box, use fa-name or ti-name Any Icon Name ti-plus
caption A optional Caption which is wrapped as H4 Headline
overlay The Main Backgroundcolor for the Overlay primary, secondary, tertiary, success, info, warning, danger, dark, white primary
color Only needed for example for white overlay to get more contrast black
zoom Enable the Image Zoom on Hover yes
link It's also possible to link the whole Element, can be any Value Images, Videos, URLs, Anchor Links
form Define the Form of the Element rounded, circle
title If a Link is found, the Title for the Link, important for Search Engines. Also used for Lightbox
target The Button Destination URL opens with this Target
alt A Alternative Text for the Image Alternative
data A Data Attribute
class Add a optional Class to the Shortcode
id Add a optional unique ID to the Shortcode
style Add optional Style Attributes to the Shortcode
lightbox Should the Link opens in a Lightbox yes, image, iframe, video
lightboxgroup Group several Lightbox Links to one Gallery
tooltip Activates the Tooltip for this Element, title parameter is required in this case yes, on, right, bottom, left
animation Activates a Animation for this Element Many, check the Animations Page
animationduration How long should the Animation run Any positive Value for seconds 1s
animationdelay Should the Animation have a delay Any positive Value for seconds 0s
smoothscroll If a internal link is found, for example link="#top" Smooth Scroll will be activated yes


We are WS-Theme, a creative and awesome group of individuals. In 2016 we set us a Goal to make the perfect Joomla Template. We believe this Joomla Template can make your life much more easier. We encourage you to try this Template, it will change your outlook on what a Joomla Template can do.

Contact us

  • Address: Untere Koppenhalde 11
    72406 Bisingen
  • Email:
  • Phone: +88 (0) 144 5532 001


Sign up to our newsletter and get exclusive deals you wont find anywhere else straight to your inbox!


Style Switcher

This Demo Panel show only a minimum of the huge available Backend Options of this Joomla Template.

Backend View Shortcode System