If no custom overlay is set the default spotlight fades in an overlay with an magnifier image. If you define a custom overlay you can choose between different animations - fade, bottom,top,right, and left.
How To Use
Use the HTML5 custom data attribute data-spotlight to activate the spotlight.
<a data-spotlight="on" href="/mojoomla/mj_estate/templates/mj-estate/images/pages/1.jpg"> <img src=templates/mj-estate/images/pages/1.jpg alt=""/> </a>
To create a custom overlay use a div element with the CSS class overlay. You can set the effect parameter to the data attribute. For example:
<a data-spotlight="effect:top;" href="/mojoomla/mj_estate/templates/mj-estate/images/pages/2.jpg"> <img src=templates/mj-estate/images/pages/2.jpg alt=""/> <span class="overlay">Custom Overlay</span> </a>
