Форум Сайтостроение Веб-строительство

Как сделать воспроизведение гифки при наведении на блок (см. сайт)?

Mahol
На сайте с 20.11.2016
Offline
102
Mahol
2318

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

Имеется сайт.

Владелец сайта заказал анимацию у художника. Хочет, чтобы гифки воспроизводились при попадании курсора в блок "Протезирование" (например). Это можно сделать? Или только при наведении на картинку (как логотип)?

То есть, при открытии сайта видим зеленые статичные картинки. Как только курсор попадает в какой-то блок, то "включается" гифка в этом блоке.

Если непонятно, откройте, пожалуйста, главную сайта.

jpg 182751.jpg
altezzik
На сайте с 06.11.2011
Offline
247
altezzik
#1

Можно по наведению менять jpg на gif с помощью jQuery или Vue.

Или так (только css):

https://codepen.io/QDeltaE/pen/VWGYOB

Mahol
На сайте с 20.11.2016
Offline
102
Mahol
#2

Анимацию сделал при наведении на картинку. А можно сделать воспроизведение анимации при наведении на какую либо ссылку в блоке?

altezzik
На сайте с 06.11.2011
Offline
247
altezzik
#3
Mahol:
А можно сделать воспроизведение анимации при наведении на какую либо ссылку в блоке?

Да, точно также.

Mahol
На сайте с 20.11.2016
Offline
102
Mahol
#4

altezzik, не понимаю, как это возможно?

Работающий код на этом сайте (нашел где-то в интернете):


<center><div class="blok"><a class="gif2"><img src="https://www.stomatologplus-vrn.ru/wp-content/uploads/2019/04/333.gif" alt="" /></a></div></center>

Применяемый стиль (в нем указаны статичная картинка):

.gif2 {

display:block; /* Устанавливаем */

width:88px; /* Ширина и высота картинки */

height:88px;

background:url('https://www.stomatologplus-vrn.ru/wp-content/uploads/2019/04/2.png') no-repeat; /* Заливаем блок статичной картинкой */
}

/* Как видно, начальное (статическое) изображение задано как фон блока с шириной и высотой этого изображения. */

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

}

a.gif2:hover {

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

}

a.gif2:hover img {

visibility:visible; /* При наведении анимация показывается */

border:0; /* без обрамления ;) */

}

Как привязать к этому активирование анимации при наведении на какую-либо ссылку в блоках?

Оплата сотовой связи на Яндекс.Директ начал открытое бета-тестирование Яндекс обновил дизайн контекстных
Samail
На сайте с 10.05.2007
Offline
369
Samail
#5
Mahol:
Как привязать к этому активирование анимации при наведении на какую-либо ссылку в блоках?

На любую ссылку не получится без JS т.к. они ниже в коде чем картинка. При наведении на блок можно:


	div.vc_custom_1551717903747:hover a.gif2 {
		background: none;
	}
	
	div.vc_custom_1551717903747:hover a.gif2 img {
		visibility: visible;
		border: 0;
	}
SS
На сайте с 15.12.2015
Offline
83
SERM-service
#6
Samail:
На любую ссылку не получится без JS т.к. они ниже в коде чем картинка. При наведении на блок можно:

Можно блоки менять вместо картинок 🤪

Размещение естественных ссылок на тематических порталах, отзовиках, справочниках (/ru/forum/1013919)
SS
На сайте с 15.12.2015
Offline
83
SERM-service
#7

Как вариант использовать такую конструкцию: 


.gif{

	display: none;

}

.link:hover .gif{

	нужное оформление гифки

	

}

контейнер gif нужно помещать в link, в каждый.

Mahol
На сайте с 20.11.2016
Offline
102
Mahol
#8

Код Samail'а прекрасно работает, спасибо.

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