YOOspotlight

YOOtheme introduces another new exclusive YOOtheme template feature. YOOspotlight!

YOOspotlight creates a smooth fading effect between two images while hovering a element. Now you can place cool spotlight effects all over your site.

How to

Create a div or span element with a background image (image.png) to display your image in your content. Add a class="spotlight" attribute to the div/span tag. The filename of the related image for the hover effect has to be named with the suffix _spotlight (image_spotlight.png) and has to be in the same folder as the background image (image.png).

Example for div tag:

<div class="spotlight" style="background: url(../images/logo.png);" width="240" height="180"></div>

Example for span tag:

<span class="spotlight" style="background: url(../images/logo.png); display: block;" width="240" height="180"></span>

If you want to put a link around the YOOspotlight image use span tags for the YOOspotlight to be XHTML 1.0 valid. And don't forget to add display: block to the CSS styling for the span tag.

Please Note: YOOspotlight is only working in IE6 with .jpg and .gif images. If you are using transparent .png images no effect is applied in IE6.