SERM-service

Можно через Js менять анимацию на картинку через определенное время, а потом менять обратно.

onmouseenter="setTimeout(() => {this.style.backgroundImage = 'url(путь к статической картинке)'}, 2000)";

onmouseleave="setTimeout(() => {this.style.backgroundImage = 'url(путь к гифке)'}, 0)";

hover не заметил.

Так как анимация привязана фоном к родительскому блоку margin не поможет, используйте background-position.

margin не сработал из за этого

element.style {
    width: 822px;
    height: 397px;
    margin: 0px;
}

А это что такое?

<div class="n2-ss-layer n2-ow radius4" 
style="left: 122.292px; top: 45.74px; width: 115.067px; height: auto; overflow: visible; font-size: 100%; right: auto; bottom: auto;" datapm="absolute" data-responsiveposition="1"
data-desktopportraitleft="-350" data-desktopportraittop="-24" 
data-responsivesize="1" data-desktopportraitwidth="160" 
data-desktopportraitheight="auto" 
data-desktopportraitalign="center" data-desktopportraitvalign="middle" 
data-parentid="" 
data-desktopportraitparentalign="center" 
data-desktopportraitparentvalign="middle" 
data-sstype="layer" data-rotation="0" data-desktopportrait="1" 
data-desktoplandscape="1" data-tabletportrait="1" 
data-tabletlandscape="1" data-mobileportrait="1" data-mobilelandscape="1" data-adaptivefont="0" data-desktopportraitfontsize="100" data-plugin="rendered"

>
<div class=" n2-ss-img-wrapper n2-ow" style="overflow:hidden;"><a class="n2-ow zoomLink cboxElement" target="_parent" href="https://www.stomatologplus-vrn.ru/wp-content/uploads/2018/09/o6.jpg" style="float: none;"><img src="//www.stomatologplus-vrn.ru/wp-content/uploads/2018/09/o6.jpg" id="n2-ss-17item10" alt="" style="display: inline-block; max-width: 100%; width: 100%; height: auto; opacity: 1;" class=" n2-ow colorbox-355" data-no-lazy="1" data-hack="data-lazy-src"><span class="zoomHover" style="opacity: 0; margin: 0px; padding: 0px;"></span></a></div></div>

Везде свои правила и все может быть.

1. Звонят по указанному номеру и проверяют. Могут представиться представителем, а могут и клиентом.

2. Если он обязателен то нет, но некоторые сайты могут добавить фирму и без адреса.

3. Да, но смотря где.

4. Нет, но подобные сигналы могут служить поводом для более тщательной проверки.

tempers, Спасибо, обращайтесь:)

Лучше в отдельном блоке или списке. С учетом float вставляйте его перед существующим списком.

Не первый раз работаю с Ольгой по дизайну, впервые сотрудничали по разработке лендинга под ключ. По цене получилось гораздо выгоднее чем заказывать отдельно у двух исполнителей, качество как всегда на высоте, все выполнено в срок.

regta, Спасибо, всегда рад поработать)

Вызвать можно с помощью JS

Можете попробовать код ниже (не тестил но должно работать).

На php повесьте функцию getProduct() с id товара на кнопку + сделайте скрипт который будет отдавать странницу с товаром.

//объект для работы с AJAX
function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}
//ниже типовой код для работы с AJAX
//query - параметры которые хотите передать серверу
//url - адрес скрипта на стороне сервера который будет обрабатывать переданные параметры
//f - функция которая будет выполнена в случае успешного запроса 
function ajax (query, url, f){
	var func = f || function (data) {console.log("Запрос выполнен!");}
	var request = getXmlHttp();
	request.open("POST", url);
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	request.send(query);
	request.onreadystatechange = asyncComplete;
	function asyncComplete(){
		if(request.readyState==4){
			if (request.readyState == 4){
				if (request.status == 200){
					func(request);
				}else{
					console.log("Сервер не доступен.");
				}
			}
		}
	}
}
//реализация вашей задачи
function getProduct(id){
	var url='http://site.ru/script.php';
        var query="product="+id;
        var f= function (data){
		var b = document.getElementsByTagName("body")[0];
                var modal = document.createElement("div");
                modal.innerHTML=data.responseText;
                b.appendChild(modal);
        }
        ajax (query, url, f);
}

Что бы рамка отобразилась нужно еще толщину указать и тип например

border: 2px solid red;

про vertical-align