[Помогите] Соц. иконки в шапке сайта. Hover

Тема в разделе "OpenCart", создана пользователем SkyLine, 26 дек 2012.

  1. SkyLine

    SkyLine

    Регистрация:
    26 сен 2012
    Сообщения:
    341
    Симпатии:
    633
    1. Помогите реализовать hover на соц. иконках в шапке сайта.
    на данный момент у меня дело обстоит так
    [​IMG]
    2. Помогите сделать по аналогии сайта http://www.conceptclub.ru/
    3. Мой код в шапке
    4. Мой Css
    5. На сайте http://www.conceptclub.ru/ реализовано через спрайты
    6. Добился максимум того, что видна плавная смена картинки, но ни как не получается сделать так же как на вышеуказанном сайте. Копировал весь код (html и css) с сайта и картинку и пытался вставить себе на сайт но не получилось. (перепробовал многие уроки из инета - не помогло)
    Просьба помочь.
     
  2. v@dim

    v@dim

    Регистрация:
    31 окт 2012
    Сообщения:
    132
    Симпатии:
    21
    Ты не так все начал. Реализация как там по моему спрайты называется. то есть одна картинка вот такая, и background-position для каждого дива и ховера. Понимаешь? и происходит какбы не подмена картинки а меняется позицыя фона. И зачем ты таблицами начал делать? Прошлый век). Там же списками все. В общем примерно объяснил. Если хочешь сам освоить гугли css спрайты, если не получится пиши.
    [​IMG]
    --- добавлено: 26 дек 2012 в 19:34 ---
    А тебе плавная смена нужна?
     
  3. SkyLine

    SkyLine

    Регистрация:
    26 сен 2012
    Сообщения:
    341
    Симпатии:
    633
    ды я знаю что спрайты через позиции работает. я пробовал на 2х картинка допустим верхний твиттер. допустим картинка 0 0 а ховер 0 -40. а когда наводишь мышку то идет плавный переход с верхней на нижнею. хочу что бы не был виден этот переезд. хочется как на том сайте навел мышку одна картинку, убрал ОП другая)
    а как можно сделать картинки по горизонтали с одинаковым расстоянием между ними (без таблиц, многие реализуют через таблицы). стырил код у артемия лебедева)))
     
  4. v@dim

    v@dim

    Регистрация:
    31 окт 2012
    Сообщения:
    132
    Симпатии:
    21
    Про переход странно. Ща сделаю выложу. А картинки, лично я такие дела люблю в иллюстраторе делать... Вариантов много, но самый понятный и простой это выстроить в ряд твои картинки и нарисовать например квадратик нужной тебе шириной (отступа) и по ним ориентировать картинки
     
  5. SkyLine

    SkyLine

    Регистрация:
    26 сен 2012
    Сообщения:
    341
    Симпатии:
    633
    вот и мне странно. по урокам в инете должно все быть нормально но у меня ни как не получается. как то весь день психовал а потом забил. щас опять вернулся к этому вопросу.
    я уже писал в какой то теме но свою не создавал, ответа не получил теперь создал. в люстре умею работать.
    перепробовал много вариантов но не получилось сделать. если выложишь рабочий код (html и css) который у тебя сработал то буду очень признателен
     
  6. v@dim

    v@dim

    Регистрация:
    31 окт 2012
    Сообщения:
    132
    Симпатии:
    21
    Вот рабочий код и картинка:
    [​IMG]
    Может немного гдето накривил, просто неохото с картинкой возится...
     
  7. SkyLine

    SkyLine

    Регистрация:
    26 сен 2012
    Сообщения:
    341
    Симпатии:
    633
    Посмотрите пожалуйста скрин. Я не могу понять почему так происходит, что горизонтально что вертикально. Уже голову всю сломал. Может это связано с тем, что шаблон у меня нестандартный. По умолчанию в шаблоне в футере были вшиты соц. иконки и они имели такой "эффект" переезда изображения.
    Огромное спасибо за помощь.

    то что получилось >
    [​IMG]
    то что было вшито в шаблон в футере >

    [​IMG]
     
  8. v@dim

    v@dim

    Регистрация:
    31 окт 2012
    Сообщения:
    132
    Симпатии:
    21
    Посмотреть бы?
     
  9. SkyLine

    SkyLine

    Регистрация:
    26 сен 2012
    Сообщения:
    341
    Симпатии:
    633
    ответ разработчика шаблона
    This code is not mine and did not come with my theme, but to disable
    the hover effect remove the "hover" rules you have in your
    stylesheet.css file.
    For example:

    #social a:hover.facebook {
    background-image: url('/image/data/icons.png');
    background-position: -42px 0px;
    }


    You can see those clearly with Firebug!
    Good luck! :smile:

    ------
    я же говорил он странный какой то.
     
  10. v@dim

    v@dim

    Регистрация:
    31 окт 2012
    Сообщения:
    132
    Симпатии:
    21
    :rofl:Похоже просто не он делал)))
     
  11. SkyLine

    SkyLine

    Регистрация:
    26 сен 2012
    Сообщения:
    341
    Симпатии:
    633
    все получилось. он просто ни как не мог меня понять. что мне было нужно. спасибо гуглу переводчику.
    когда он понял что нужно убрать анимацию то предложил вот такой вариант.
    transition: 0;
    -webkit-transition: 0;
    -moz-transition: 0;
    я добавил к каждой иконке и все заработало так как надо.
    Вам отдельное спасибо за помощь!
     
    vadik21 нравится это.
  12. v@dim

    v@dim

    Регистрация:
    31 окт 2012
    Сообщения:
    132
    Симпатии:
    21
    Да, я никогда не пользовался этим св-ом, действительно именно оно добавляет плавные переходы прозрачности и движения... теперь буду знать. Спасибо!
     
    SkyLine нравится это.