плохо очень работает spotlight... использую на wordpress тему Spark, вот её демка - http://www.yootheme.com/demo/wordpress вверху выбрать тему Spark. для понятности понаводите на нижние картинки курсором - я хочу также... я создал виджет, туда сунул типа этого: <div class="spotlight fade"> <img src="http://cs5985.vkontakte.ru/u2385349/110040641/z_fd3de59b.jpg" width="640" height="480" alt="spotlight" title="spotlight" /> <div> <h3 class="title">asddsa</h3> </div> </div> сделал как написано было в факе разрабочтика темы: http://www.yootheme.com/docs/home/item/spotlight результат можно посмотреть на главной: www.vircci.com пытался намудрить style в div, чтобы фон тёмный был, отцентровано всё, шрифты с темы были... но посмотрел что у меня вполне нормально работает spotlight bottom (в демке темы - первые фото), тогда я открыл css в теме и увидел что там всё уже прописано и должно отображаться как в демке... вопрос - почему тупит? пробовал также еще spotlight top/left/right - тоже тупят, кроме bottom... вот часть кода из typography.css: /* * spotlight */ .spotlight .spotlight1 { visibility: hidden; } .spotlight.fade .spotlight1 > div > a:first-child, .spotlight.bottom .spotlight1 > div > a:first-child { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } /* fade: zoom */ .spotlight.fade.zoom .spotlight1 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/spotlight_fade_zoom.png) 50% 50% no-repeat; } /* fade: color */ .spotlight.fade.color .spotlight1 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: auto !important; padding: 20px; background: #141516; } .spotlight.fade.color h3 { position: absolute; top: 37%; left: 0; right: 0; margin: 0; line-height: 23px; } .spotlight.fade.color h3 span { display: block; text-align: center; } .spotlight.fade.color h3 span.subtitle { font-family: Georgia,"Times New Roman",Times,serif; font-size: 15px; font-style: italic; color: #AAB3BE; } .spotlight.fade.color h3 span.title { font-size: 24px; text-transform: uppercase; letter-spacing: -1px; color: #F2F1F0; } /* top, bottom, left, right */ .spotlight.bottom .spotlight1 > * { padding: 15px; background: #111; color: #ffffff; } .spotlight.bottom h3 { margin: 0px 0px 3px 0px; font-size: 24px; text-transform: uppercase; letter-spacing: -1px; color: #F2F1F0; } .spotlight.bottom p { margin: 0; font-family: Georgia,"Times New Roman",Times,serif; font-size: 15px; font-style: italic; color: #AAB3BE; }
