Use the HTML5 custom data attribute data-spotlight
to activate the spotlight. For example:
<a data-spotlight="on"
href="mypage.html"><img src="image.jpg" width="180" height="120" 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:
<adata-spotlight="effect:bottom;"
href="mypage.html"> <img src="image.jpg" width="180" height="120" alt="" /> <divclass="overlay"
>Custom Overlay</div> </a>
You can set the effect parameter to fade
, bottom
, top
, right
or left
.