ZorNet.Ru — сайт для вебмастера » HTML и CSS » 2 hover-эффекта при наведении на jQuery и CSS3

2 hover-эффекта при наведении на jQuery и CSS3

Представляю 2 аналогичных эффекта при наведении курсора на картинку, где появится прозрачно темная гамма с кнопкой по центру при CSS3. Это распространенная методика и тематически не относится, только сейчас веб мастер может выбрать, сделать его на чистых стилях, или при помощи jQuery, где этот же эффект, но уже по другому смотрится, в плане анимации. Вы решили разнообразить стилистику на интернет ресурсе, то эта анимация отлично отработает по своей функций. Так как можно ее подключить к разным картинкам, которое находится на сайте, но главный плюс, это отличная настройка, где можно его применить на светлом или темном сайте.

Один из простых вариантов заключается в том, чтобы поместить цветную рамку вокруг снимка с помощью CSS и изменить цвет границы при зависании. Еще одним интересным вариантом является применение фоновой тени позади картинки с CSS3 при зависании. Где используется оба метода на нескольких веб сайтах, но хотел получить более захватывающее решение.

Поэтому, когда вы наведите указатель мыши на картинке, вы увидите значок увеличительного стекла на прозрачном черном фоне, который можно изменить под любую палитру цвета. Это позволит пользователю легко увидеть, где они находятся на странице. Другая причина, по которой этот метод лучше, чем просто изменение цвета границы, заключается в том, что увеличительное стекло дает указание на то, что снимок будет увеличиваться или расширяться при нажатии.

Чтоб понять о чем речь идет, здесь в материале предоставлена ниже Demoстраница, также по изображению все понятно по работе анимации.

Эффект окрашивания в серый цвет изображений при наведении

Здесь представлено два эффекта, один использовал jQuery, а другой работает только CSS3.

Метод CSS3

С ростом поддержки CSS3 в современных браузерах мне просто пришлось попробовать этот метод, используя непрозрачность CSS3 и переходы.

HTML

Код

CSS

Код

.dzertun{
  height: 325px;
  width: 324px;
border: 2px solid #b2b4b7;
  }

span.batesazikopas {
  opacity: 1;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition: -webkit-transform 1s;
  background: url(http://wpandsuch.com/posts/jquery-image-rollover/images/mag.png) center center no-repeat #191919;
  cursor: pointer;
  height: 327px;
  width: 327px;
  position: absolute;
  z-index: 10;
  opacity: 0;
}

span.batesazikopas:hover {
  opacity: .6;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition: -webkit-transform 1s;
  -webkit-box-shadow: 0px 0px 3px #131212;
  -moz-box-shadow: 0px 0px 3px #101010;
  box-shadow: 0px 0px 3px #131212;
}

Здесь по стилистике, вы самостаяельно можете оформить.

Демонстрация

Метод jQuery

Здесь его овместим с перекрестным браузером, и в отличие от метода CSS3 исчезает увеличительное стекло как в формате AND. Этот метод использует jQuery для установки непрозрачности элемента span при зависании.

HTML

Код

Код

$(function() {
$(".gsazuqs-amipokta").css("opacity","0");
$(".gsazuqs-amipokta").hover(function () {
$(this).stop().animate({
opacity: 7
}, "slow");
},
function () {
$(this).stop().animate({
opacity: 0
}, "slow");
});
});

CSS

Код

span.gsazuqs-amipokta {
background:url(http://wpandsuch.com/posts/jquery-image-rollover/images/mag.png) center center no-repeat #000;
  height: 315px;
  position: absolute;
  width: 315px;
  z-index: 10;
  -webkit-box-shadow: 0px 0px 5px #101010;
  -moz-box-shadow: 0px 0px 5px #0c0c0c;
  box-shadow: 0px 0px 5px #0e0e0e;
}

.kaburetsa {
  height: 315px;
  width: 315px;
  box-shadow: 0px 4px 9px rgba(93, 88, 88, 0.36), 0px 9px 27px -14px rgba(103, 98, 98, 0.66);
  }

Оба метода используют сходные методы, единственное отличие, это расстановка, в которой они используют jQuery или CSS для угасания opcaity. Поставить диапазон для отображения блока, установив ширину и высоту диапазона и установив более высокий индекс z, чем снимок, где элемент span покрывает.

Выставить фоновую картинку и цвет, элемент span скрывает исходное изображение, где прозрачность на ноль на элементе span позволяет видеть уменьшенные по размерам картинки.

Демонстрация

22 Июня 2018 Просмотров: 2195 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0