Как статичные png объединить в sprite (см. код)?

Mahol
На сайте с 20.11.2016
Offline
59
336

Всем доброго дня.

На главной сайта есть статичные png и анимированные gif, которые запускаются при наведении курсора.

Как статичные объединить в спрайт? Пробую, но не получается - картинку не видно.

Код HTML:

<center><div class="wefg"><a class="gif3"><img src="https://www.***.ru/wp-content/uploads/2019/04/11.gif" alt="" /></a></div></center>

В style.css такой код, скрывающий гифку и показывающий статичную png:

.gif3 {

display:block; /* Устанавливаем */
width:88px; /* Ширина и высота картинки */
height:88px;
background:url('https://***.ru/wp-content/uploads/2019/04/1.png') no-repeat; /* Заливаем блок статичной картинкой */
}

a.gif3 img {
visibility:hidden; /* Aнимация не была видна в ситуации, когда мышь не наведена */
}

a.gif3:hover {
background:none; /* Фон (статичное изображение) не было видно при наведении мыши */
}

a.gif3:hover img {
visibility:visible; /* При наведении анимация показывается */
border:0; /* без обрамления ;) */
}
jpg pr.jpg
S
На сайте с 13.10.2014
Offline
148
#1

для переключения между картинками в спрайте используют css свойство background-position: с указанием абсолютного смещения

Mahol
На сайте с 20.11.2016
Offline
59
#2
silicoid:
для переключения между картинками в спрайте используют css свойство background-position: с указанием абсолютного смещения

Хорошо, но это не подходит для gif, я правильно понимаю?

S
На сайте с 30.09.2016
Offline
459
#3
Mahol:
Хорошо, но это не подходит для gif, я правильно понимаю?

Какая разница?

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
foxi
На сайте с 02.03.2011
Offline
877
#4
Mahol:
Хорошо, но это не подходит для gif, я правильно понимаю?

для анимированного гифа не подходит.

Антибот защита для сайта (https://antibot.cloud/ru.html#searchengines) (защита от кражи контента и спама) | ВебМастерские микроблоги (https://wmsn.biz/#searchengines) | Фокси SEO форум (https://foxi.biz/#searchengines)
S
На сайте с 30.09.2016
Offline
459
#5
foxi:
для анимированного гифа не подходит.

А про анимированные речь и не шла

Mahol:
Как статичные объединить в спрайт?
Mahol
На сайте с 20.11.2016
Offline
59
#6
Sitealert:
А про анимированные речь и не шла

Да, изначально речь не шла - мой вопрос был следствием ответа silicoidа.

S
На сайте с 30.09.2016
Offline
459
#7
Mahol:
мой вопрос был следствием ответа silicoidа.

silicoid просто написал, по какому принципу работает спрайт.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий