Суббота, 21.10.2017, 17:10
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Статьи про uCoz
  • Прибыльные азартные аппараты
  • Преимущества виртуального казино Вулкан 24
  • Доступное виртуальное каино
  • Материальная составляющая мира
  • Никогда не поздно учиться
  • Активные акции в виртуальном казино
  • Особенности мультитач столов для бизнеса
  • Практичность и доступная цена мультитач рамок позволяют внедрять технику для раличных целей
  • Создаем стильный интерьер при помощи материалов, купленных в магазине KERAMOGRANIT.RU
  • Выбираем эксклюзивную продукцию от KERAMOGRANIT.RU
  • Что влияет на стоимость сайта?
  • Как самостоятельно создать блог без усилий
  • Как добавить карту сайта в Wordpress
  • В чем заключается SEO-продвижение сайта?
  • Продвижение ссылками – будет ли работать в 2015 году?
  • Программы обработки, сравнения и анализа прайсов
  • Комплексное продвижение сайта как основа репутационного маркетинга
  • У кого заказывать разработку сайта
  • Как создать интернет-магазин?
  • Эксклюзивный дизайн сайта от студии Мультплекс
  • Наш опрос
    Играете ли вы в Counter Strike?


    Всего ответов: 1941

    установить такой вид опроса
    Статистика
    Яндекс.Метрика
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0


    Зарегистрировано 30412 (сегодня + 0 новых, вчера + 1 новых), В каталоге файлов 1127 материала(ов), Оставлено 5119 комментариев, На форуме создано тем и ответов.

    установить такую статистику

    Блок CW результаты

    Победы
    Победы(10)

    Поражения
    Поражения(5)


    Установить CW блок на свой сайт
    Внимание!
    Наш сайт адаптирован под браузер Mozilla Firefox
    скрипты для uCoz
    Скачать/Download
    В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

    установить такой блок
    Расскажи Друзьям!
    Комментарии
    Новость: Дополнительные поля в материлы uCoz
    Алексей написал:
    Не работает
    Новость: Блок баннеры "Наши друзья" uCoz
    написал:
    http://programm-ist.ucoz.org/полюбуйтесь моим сайтом))) Спс За Блок, надо подверстать! cool
    Новость: Поисковые боты Google, Yandex, Rambler в статистики онлайн uCoz
    написал:
    в новый блок воткнул данный скрипт. Все ок. В новом блоке (бот) отображаются боты, а в статистике, добавилось/сколько ботов и посетителей Спасибо
    Новость: Кнопка "На верх" для сайта UCOZ
    написал:
    У меня эти кнопки никак не проявляются. Пробовала разные ставить.
    Новость: Выделяем цветом личные сообщения на uCoz сайте
    andre написал:
    Инструкции по установке скриптов http://mexanus.ru

    Читать все комментарии
    Топ комментаторов

    установить такой информер
    VKONTAKTE

    FACEBOOK
    Главная страница » Помощь Вебмастеру » Категория HTML коды для uCoz » Добавлено [16.01.2014, 14:42]

    Красивый еффект при наведении на картинки для uCoz

    Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

    Предлагаем к вашему пользованию замечательный и Красивый еффект при
    наведении на картинки для uCoz от профессионального и талантливого
    веб-мастера под ником Apocalypse. Он постоянно делает какие-то хорошие
    готовые решения, которыми мы с вами пользуются ежедневно на своих сайта
    uCoz. Более подробно про установку узнайте чуть ниже в полной новости.

    • Если же вас интересует информация и цены на антирадар и радар-детекторы в интернет-магазине СотМаркет, тогда посмотрите на сайте этого интернет-магазине. Лучшие цены и самое отличное и зарекомендованное качество продукции.

    Установка:


    В самый низ вашего css вставляйте:

    Код
    </span><span class="pln">imgholder </span><span class="pun">{</span><span class="pln"> <br> position</span><span class="pun">:</span><span class="pln">relative</span><span class="pun">;</span><span class="pln"> <br> width</span><span class="pun">:</span><span class="lit">120px</span><span class="pun">;</span><span class="pln"> <br> height</span><span class="pun">:</span><span class="lit">120px</span><span class="pun">;</span><span class="pln"> <br> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="kwd">float</span><span class="pun">:</span><span class="pln">left</span><span class="pun">;</span><span class="pln"> <br> margin</span><span class="pun">:</span><span class="lit">40px</span><span class="pln"> </span><span class="lit">30px</span><span class="pun">;</span><span class="pln"> <br> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="com">/* thumbnails style */</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">imgholder img </span><span class="pun">{</span><span class="pln"> <br> position</span><span class="pun">:</span><span class="pln">absolute</span><span class="pun">;</span><span class="pln"> <br> left</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> <br> top</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> <br> width</span><span class="pun">:</span><span class="lit">120px</span><span class="pun">;</span><span class="pln"> <br> height</span><span class="pun">:</span><span class="lit">120px</span><span class="pun">;</span><span class="pln"> <br> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="lit">5</span><span class="pun">;</span><span class="pln"> <br> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> <br> opacity</span><span class="pun">:</span><span class="lit">0.3</span><span class="pun">;</span><span class="pln"> <br> filter</span><span class="pun">:</span><span class="pln"> alpha</span><span class="pun">(</span><span class="pln">opacity</span><span class="pun">=</span><span class="lit">30</span><span class="pun">);</span><span class="pln"> <br> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="com">#000; </span><span class="pln"><br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="com">#000; </span><span class="pln"><br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="com">#000; </span><span class="pln"><br> transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">0.5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.5</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">0.5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.5</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">0.5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.5</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">0.5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.5</span><span class="pun">);</span><span class="pln"> <br> transition</span><span class="pun">:</span><span class="pln"> opacity </span><span class="lit">1s</span><span class="pun">,</span><span class="pln"> transform </span><span class="lit">1s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">-</span><span class="kwd">out</span><span class="pln"> </span><span class="lit">0.3s</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> opacity </span><span class="lit">1s</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transform </span><span class="lit">1s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">-</span><span class="kwd">out</span><span class="pln"> </span><span class="lit">0.3s</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> opacity </span><span class="lit">1s</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform </span><span class="lit">1s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">-</span><span class="kwd">out</span><span class="pln"> </span><span class="lit">0.3s</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">imgholder</span><span class="pun">:</span><span class="pln">hover img </span><span class="pun">{</span><span class="pln"> <br> opacity</span><span class="pun">:</span><span class="lit">1</span><span class="pun">;</span><span class="pln"> <br> filter</span><span class="pun">:</span><span class="pln"> alpha</span><span class="pun">(</span><span class="pln">opacity</span><span class="pun">=</span><span class="lit">100</span><span class="pun">);</span><span class="pln"> <br> transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">imgholder figcaption </span><span class="pun">{</span><span class="pln"> <br> position</span><span class="pun">:</span><span class="pln">absolute</span><span class="pun">;</span><span class="pln"> <br> left</span><span class="pun">:-</span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> <br> top</span><span class="pun">:</span><span class="lit">40</span><span class="pun">%;</span><span class="pln"> <br> width</span><span class="pun">:</span><span class="lit">130px</span><span class="pun">;</span><span class="pln"> <br> color</span><span class="pun">:#</span><span class="lit">004E87</span><span class="pun">;</span><span class="pln"> <br> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln">bold</span><span class="pun">;</span><span class="pln"> <br> text</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:-</span><span class="lit">1px</span><span class="pln"> </span><span class="pun">-</span><span class="lit">1px</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="com">#fff; </span><span class="pln"><br> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="lit">4</span><span class="pun">;</span><span class="pln"> <br> transition</span><span class="pun">:</span><span class="pln"> top </span><span class="lit">0.5s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> top </span><span class="lit">0.5s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> top </span><span class="lit">0.5s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">imgholder</span><span class="pun">:</span><span class="pln">hover figcaption </span><span class="pun">{</span><span class="pln"> <br> top</span><span class="pun">:</span><span class="lit">120</span><span class="pun">%;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="com">/* decorations style */</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">imgholder </span><span class="pun">.</span><span class="pln">circle </span><span class="pun">{</span><span class="pln"> <br> position</span><span class="pun">:</span><span class="pln">absolute</span><span class="pun">;</span><span class="pln"> <br> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">imgholder </span><span class="pun">.</span><span class="pln">outer1 </span><span class="pun">{</span><span class="pln"> <br> top</span><span class="pun">:-</span><span class="lit">8px</span><span class="pun">;</span><span class="pln"> <br> left</span><span class="pun">:-</span><span class="lit">8px</span><span class="pun">;</span><span class="pln"> <br> width</span><span class="pun">:</span><span class="lit">120px</span><span class="pun">;</span><span class="pln"> <br> height</span><span class="pun">:</span><span class="lit">120px</span><span class="pun">;</span><span class="pln"> <br> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="lit">2</span><span class="pun">;</span><span class="pln"> <br> border</span><span class="pun">:</span><span class="lit">8px</span><span class="pln"> solid</span><span class="pun">;</span><span class="pln"> <br> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:#</span><span class="pln">DEEBFC</span><span class="pun">;</span><span class="pln"> <br> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">3px</span><span class="pln"> </span><span class="com">#AFD3FF; </span><span class="pln"><br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">ox</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">3px</span><span class="pln"> </span><span class="com">#AFD3FF; </span><span class="pln"><br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">3px</span><span class="pln"> </span><span class="com">#AFD3FF; </span><span class="pln"><br> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffffff; </span><span class="pln"><br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">radial</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">center</span><span class="pun">,</span><span class="pln"> ellipse cover</span><span class="pun">,</span><span class="pln"> </span><span class="com">#ffffff 0%, #e2efff 100%); </span><span class="pln"><br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">radial</span><span class="pun">,</span><span class="pln"> center center</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0px</span><span class="pun">,</span><span class="pln"> center center</span><span class="pun">,</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%,</span><span class="pln"> color</span><span class="pun">-</span><span class="pln">stop</span><span class="pun">(</span><span class="lit">0</span><span class="pun">%,</span><span class="pln"> </span><span class="com">#ffffff), color-stop(100%, #e2efff)); </span><span class="pln"><br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">radial</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">center</span><span class="pun">,</span><span class="pln"> ellipse cover</span><span class="pun">,</span><span class="pln"> </span><span class="com">#ffffff 0%, #e2efff 100%); </span><span class="pln"><br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">radial</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">center</span><span class="pun">,</span><span class="pln"> ellipse cover</span><span class="pun">,</span><span class="pln"> </span><span class="com">#ffffff 0%, #e2efff 100%); </span><span class="pln"><br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">radial</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">center</span><span class="pun">,</span><span class="pln"> ellipse cover</span><span class="pun">,</span><span class="pln"> </span><span class="com">#ffffff 0%, #e2efff 100%); </span><span class="pln"><br> background</span><span class="pun">:</span><span class="pln"> radial</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">center</span><span class="pun">,</span><span class="pln"> ellipse cover</span><span class="pun">,</span><span class="pln"> </span><span class="com">#ffffff 0%, #e2efff 100%); </span><span class="pln"><br> filter</span><span class="pun">:</span><span class="pln"> progid</span><span class="pun">:</span><span class="typ">DXImageTransform</span><span class="pun">.</span><span class="typ">Microsoft</span><span class="pun">.</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">startColorstr</span><span class="pun">=</span><span class="str">'#ffffff'</span><span class="pun">,</span><span class="pln"> endColorstr</span><span class="pun">=</span><span class="str">'#e2efff'</span><span class="pun">,</span><span class="pln"> </span><span class="typ">GradientType</span><span class="pun">=</span><span class="lit">1</span><span class="pun">);</span><span class="pln"> <br> transform</span><span class="pun">:</span><span class="pln">rotate</span><span class="pun">(</span><span class="lit">90deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln">rotate</span><span class="pun">(</span><span class="lit">90deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln">rotate</span><span class="pun">(</span><span class="lit">90deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln">rotate</span><span class="pun">(</span><span class="lit">90deg</span><span class="pun">);</span><span class="pln"> <br> transition</span><span class="pun">:</span><span class="pln"> transform </span><span class="lit">1.8s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">,</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow </span><span class="lit">1s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color </span><span class="lit">1.5s</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transform </span><span class="lit">1.8s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow </span><span class="lit">1s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color </span><span class="lit">1.5s</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform </span><span class="lit">1.8s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow </span><span class="lit">1s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color </span><span class="lit">1.5s</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">imgholder</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">.</span><span class="pln">outer1 </span><span class="pun">{</span><span class="pln"> <br> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:#</span><span class="lit">0088EA</span><span class="pln"> </span><span class="com">#7FC9FF #0088EA #7FC9FF; </span><span class="pln"><br> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="com">#0285E2; </span><span class="pln"><br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="com">#0285E2; </span><span class="pln"><br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="com">#0285E2; </span><span class="pln"><br> transform</span><span class="pun">:</span><span class="pln">rotate</span><span class="pun">(-</span><span class="lit">10deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln">rotate</span><span class="pun">(-</span><span class="lit">10deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln">rotate</span><span class="pun">(-</span><span class="lit">10deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln">rotate</span><span class="pun">(-</span><span class="lit">10deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">imgholder </span><span class="pun">.</span><span class="pln">outer2 </span><span class="pun">{</span><span class="pln"> <br> top</span><span class="pun">:-</span><span class="lit">18px</span><span class="pun">;</span><span class="pln"> <br> left</span><span class="pun">:-</span><span class="lit">18px</span><span class="pun">;</span><span class="pln"> <br> width</span><span class="pun">:</span><span class="lit">136px</span><span class="pun">;</span><span class="pln"> <br> height</span><span class="pun">:</span><span class="lit">136px</span><span class="pun">;</span><span class="pln"> <br> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="lit">1</span><span class="pun">;</span><span class="pln"> <br> border</span><span class="pun">:</span><span class="lit">10px</span><span class="pln"> solid</span><span class="pun">;</span><span class="pln"> <br> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#D6E5FC #9BC8FF #D6E5FC #9BC8FF; </span><span class="pln"><br> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">20px</span><span class="pln"> </span><span class="com">#8EB9FF; </span><span class="pln"><br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">20px</span><span class="pln"> </span><span class="com">#8EB9FF; </span><span class="pln"><br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">20px</span><span class="pln"> </span><span class="com">#8EB9FF; </span><span class="pln"><br> opacity</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> <br> filter</span><span class="pun">:</span><span class="pln"> alpha</span><span class="pun">(</span><span class="pln">opacity</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln"> <br> transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1.3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1.3</span><span class="pun">)</span><span class="pln"> rotate</span><span class="pun">(</span><span class="lit">180deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1.3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1.3</span><span class="pun">)</span><span class="pln"> rotate</span><span class="pun">(</span><span class="lit">180deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1.3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1.3</span><span class="pun">)</span><span class="pln"> rotate</span><span class="pun">(</span><span class="lit">180deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1.3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1.3</span><span class="pun">)</span><span class="pln"> rotate</span><span class="pun">(</span><span class="lit">180deg</span><span class="pun">);</span><span class="pln"> <br> transition</span><span class="pun">:</span><span class="pln"> opacity </span><span class="lit">0.5s</span><span class="pun">,</span><span class="pln"> transform </span><span class="lit">0.7s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> opacity </span><span class="lit">0.5s</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transform </span><span class="lit">0.7s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> opacity </span><span class="lit">0.5s</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform </span><span class="lit">0.7s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">imgholder</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">.</span><span class="pln">outer2 </span><span class="pun">{</span><span class="pln"> <br> opacity</span><span class="pun">:</span><span class="lit">0.9</span><span class="pun">;</span><span class="pln"> <br> filter</span><span class="pun">:</span><span class="pln"> alpha</span><span class="pun">(</span><span class="pln">opacity</span><span class="pun">=</span><span class="lit">90</span><span class="pun">);</span><span class="pln"> <br> transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> rotate</span><span class="pun">(-</span><span class="lit">10deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> rotate</span><span class="pun">(-</span><span class="lit">10deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> rotate</span><span class="pun">(-</span><span class="lit">10deg</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> rotate</span><span class="pun">(-</span><span class="lit">10deg</span><span class="pun">);</span><span class="pln">

    Картинки с эффектом оформляются следующим образом:

    <div class="imgholder"> 
    <div class="outer1 circle"></div>
    <div class="outer2 circle"></div>
    <figure>
    <img src="Ссылка на картинку" />
    <figcaption class="caption">Заголовок картинки</figcaption>
    </figure>
    </div>


    При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Красивый еффект при наведении на картинки для uCoz



    Расскажи друзьям интересные новости:


    - Установить на свой сайт блок социальных закладок
    Категория: HTML коды для uCoz | Добавил: scripts_for_ucoz | Теги: еффект, uCoz, красивый, наведении, картинки
    Просмотров: 10236 | Загрузок: 0 | Комментарии: 4 | Рейтинг: 0.0/0
    Всего комментариев: 4
    4 dnz_133   (19.04.2017 21:08)
    И че? Обычные картинки. cool

    3 T_Sergey   (21.08.2014 02:55)
    Демка где ?

    2 AdminKa6271   (22.07.2014 22:05)
    Куда поставить?

    1 Black-Yellow   (19.01.2014 19:33)
    Действительно талантливый мастер tongue

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Для добавления необходима авторизация

    Хостинг от uCoz