Не работают коды CSS

Здравствуйте.
Решил воспользоваться кодами CSS для создания анимированной навигации (дабы не нагружать форум внешними плагинами) из этой темы (см. так же демо): http://ruseller.com/lessons.php?rub=2&id=1322 но почему-то у меня ничего не работает так, как это работает в демо, а точнее, вообще нет никакой анимации.

P.S. сами блоки div ставил в приветствие, а код CSS пробовал как в таблицу CSS ставить, так и в приветствие в <style>.

автор **Luz** Январь 24th 2012, 12:40

Альберт Вескер,
добрый день!

Дайте, пожалуйста, пример конкретных кодов, которые вы вставили, соответственно, в Приветствие и в CSS , и которые не сработали... (именно в том виде, в котором вы их ставили на форум)

Способ I.
Сразу всё в приветствие:

Код:: <div class="view"> <img src="http://i44.servimg.com/u/f44/16/34/07/89/11110.jpg" /> <div class="mask"> <h2>Заголовок</h2> <p>Текст сообщения</p> <a href="#" class="info">Кнопка</a> </div> </div> <style type="text/css"> .view { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url('http://i44.servimg.com/u/f44/16/34/07/89/11110.jpg') no-repeat center center } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 } .view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 } /*демо 10*/ .view-tenth img { transform: scaleY(1); transition: all 0.7s ease-in-out; } .view-tenth .mask { background-color: rgba(255, 231, 179, 0.3); transition: all 0.5s linear; opacity: 0; } .view-tenth h2{ border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .view-tenth p { color: #333; opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth:hover img { transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info{ transform: scale(1); opacity: 1; } <style>

Способ II.
В приветствие:

Код:: <div class="view"> <img src="http://i44.servimg.com/u/f44/16/34/07/89/11110.jpg" /> <div class="mask"> <h2>Заголовок</h2> <p>Текст сообщения</p> <a href="#" class="info">Кнопка</a> </div> </div>

В CSS:

Код:: .view { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url('http://i44.servimg.com/u/f44/16/34/07/89/11110.jpg') no-repeat center center } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 } .view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 } /*демо 10*/ .view-tenth img { transform: scaleY(1); transition: all 0.7s ease-in-out; } .view-tenth .mask { background-color: rgba(255, 231, 179, 0.3); transition: all 0.5s linear; opacity: 0; } .view-tenth h2{ border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .view-tenth p { color: #333; opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth:hover img { transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info{ transform: scale(1); opacity: 1; }

Собственно я испробовал несколько вариантов кодов, представленных на демо,но не один не работает.

автор **Luz** Январь 26th 2012, 13:24

Вы забыли сделать вот это:

Добавляем специальный класс view-first к элементу с классом view для данного эффекта. Специальный класс будет добавляться в каждом примере к элементу с классом view (view-first, view-second, view-third, и так далее).

Код:: <div class="view view-first"> </div>

Luz, сделал, но упорно не хочет работать как в демо:

автор **Luz** Январь 27th 2012, 14:23

честно говоря, моих личных компетенций не хватает, чтобы подсказать вам, почему код не работает.
Я задала вопрос нашему штату - если у кого-то будет возможность посмотреть, может быть вам еще подскажут.