Language Translator

Accordion
Accisabilty_Options.jpg Articles or modules can be published in the Accordion module.
YOOspotlight
YOOlightbox
YOOlogin

Member Login

YOOspotlight PDF Print E-mail
User Rating: / 0
PoorBest 
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.
 
< Prev   Next >
[ Back ]