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

Набор hover-эффектов при наведении на CSS

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

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

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

Как пример, где по центру навели курсор:

Красивый эффект наведение курсора на CSS3

Приступаем к установке:

HTML

Код

<div class="tesamipdseb">
  <div class="row cf">
  <div class="vanterested-marecation tudgan col">
  <div class="kategkob">
  <span class="kadnebulos">
  <h1>Название</h1>
  <p>Здесь идет категория сайта</p>
  </span>
  <div class="kingachieve">
  <i class="fa fa-commenting-o fa-3x" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  <div class="gebesana-prepared tudgan col">
  <div class="kategkob">
  <span class="kadnebulos">
  <h1>Как начать бизнес</h1>
  <p>Начать новый бизнес нелегко</p>
  </span>
  <div class="kingachieve">
  <i class="fa fa-cogs fa-3x" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  <div class="vonslodsan-gselling-gavacation tudgan col">
  <div class="kategkob">
  <span class="kadnebulos">
  <h1>5 горячих карьер</h1>
  <p>С некоторых пор мир</p>
  </span>
  <div class="kingachieve">
  <i class="fa fa-users fa-3x" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  </div>
  <div class="row cf">
  <div class="suprovemen tudgan col">
  <div class="kategkob">
  <span class="kadnebulos">
  <h1>Не хватает трафа</h1>
  <p>Вероятно, пришло время</p>
  </span>
  <div class="kingachieve">
  <i class="fa fa-star fa-3x" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  <div class="continuou tudgan col">
  <div class="kategkob">
  <span class="kadnebulos">
  <h1>Шаблоны</h1>
  <p>Я начал свое путешествие в SEO</p>
  </span>
  <div class="kingachieve">
  <i class="fa fa-trophy fa-3x" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  <div class="vdetubesan tudgan col">
  <div class="kategkob">
  <span class="kadnebulos">
  <h1>Скрипты</h1>
  <p>Что если бы вы могли искать</p>
  </span>
  <div class="kingachieve">
  <i class="fa fa-thumbs-up fa-3x" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  </div>
  <div class="row cf">
  <div class="vegectations tudgan col">
  <div class="kategkob">
  <span class="kadnebulos">
  <h1>Название-5</h1>
  <p>Здесь идет категория сайта</p>
  </span>
  <div class="kingachieve">
  <i class="fa fa-rocket fa-3x" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  <div class="vturalma-noginimum tudgan col">
  <div class="kategkob">
  <span class="kadnebulos">
  <h1>Названиеt</h1>
  <p>Здесь идет категория сайта</p>
  </span>
  <div class="kingachieve">
  <i class="fa fa-coffee fa-3x" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  <div class="canogineg-rategou-natural tudgan col">
  <div class="kategkob">
  <span class="kadnebulos">
  <h1>Название-1</h1>
  <p>Здесь идет категория сайта</p>
  </span>
  <div class="kingachieve">
  <i class="fa fa-calendar fa-3x" aria-hidden="true"></i>
  </div>
  </div>
  </div>
  </div>
  </div>

CSS

Код

.tesamipdseb { max-width: 938px; width: 100%; margin: 0 auto;}

.tudgan {
  width: 32%;
}

/* COLUMNS */

.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}

.col:first-of-type { margin-left: 0; }

/* CLEARFIX */

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

/* GENERAL STYLES FOR BOX AND kingachieve */

.kategkob {
  display: block;
  width: 100%;
  height: 195px;
  overflow: hidden;
  background-color: #8a8282;
  text-align: center;
  position: relative;
  cursor:pointer;
}

.kingachieve{
  width: 100%;
  height:100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* SLIDE IN */

.vanterested-marecation .kingachieve{
  background-color: #46b383;
  line-height: 195px;
  color: #f7f7f9;
  transform: translateX(-100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}

.vanterested-marecation .kategkob:hover .kingachieve{
  transform: translateX(0);
}

/* SLIDE UP */

.gebesana-prepared .kingachieve{
  background-color: #2a8ea2;
  line-height: 195px;
  color: #f7f7f9;
  transform: translateY(100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}

.gebesana-prepared .kategkob:hover .kingachieve{
  transform: translateY(0);
}

/* SLIDE DOWN DELAY */

.vonslodsan-gselling-gavacation .kingachieve{
  background-color: #c54864;
  line-height: 195px;
  color: #f7f7f9;
  transform: translateY(-100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}

.vonslodsan-gselling-gavacation .kategkob:hover .kingachieve{
  transform: translateY(0);
}

.vonslodsan-gselling-gavacation .kingachieve i{
  transform: translateY(-80%);
  opacity: 0;
  -webkit-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
  -o-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
  transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
}

.vonslodsan-gselling-gavacation .kategkob:hover .kingachieve i{
  transform: translateY(0);
  opacity: 1;
}

/* suprovemen */

.suprovemen .kingachieve{
  background-color: #37618c;
  line-height: 195px;
  color: #f7f7f9;
  transform-origin: 0 0;
  transform: rotate(90deg);
  -webkit-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}

.suprovemen .kategkob:hover .kingachieve{
  transform: rotate(0deg);
}

/* continuou */

.continuou .kingachieve{
  background-color: #b39334;
  line-height: 195px;
  color: #f7f7f9;
  transform: translateX(210%) scale(3);
  -webkit-transition: transform 0.6s ease-in-out;
  -o-transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
}

.continuou .kategkob:hover .kingachieve{
  transform: translateX(0) scale(1);
}

/* vdetubesan */

.vdetubesan .kingachieve{
  background-color: #0a6d64;
  line-height: 195px;
  color: #f7f7f9;
  opacity: 0;
  transform: suprovemenY(180deg);
  -webkit-transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
  -o-transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
  transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
}

.vdetubesan .kategkob:hover .kingachieve{
  opacity: 1;
  transform: suprovemenY(0deg);
}

/* vegectations */

.vegectations .kingachieve{
  background-color: #d42e22;
  line-height: 195px;
  color: #f7f7f9;
  opacity: 0;
  transform: vegectationsX(-10deg);
  -webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.vegectations .kategkob:hover .kingachieve{
  transform: vegectationsX(0deg);
  opacity: 1;
}

/* CORNER */

.vturalma-noginimum .kingachieve{
  background-color: #781988;
  line-height: 195px;
  color: #f7f7f9;
  transform: translate(100%, 100%);
  -webkit-transition: transform 0.4s ease-in-out;
  -o-transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

.vturalma-noginimum .kategkob:hover .kingachieve{
  transform: translate(0, 0);
}

/* CORNER */

.canogineg-rategou-natural .kingachieve{
  background-color: #cc4318;
  line-height: 195px;
  color: #f7f7f9;
  transform: translate(-100%, -100%);
  -webkit-transition: transform 0.4s ease-in-out;
  -o-transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

.canogineg-rategou-natural .kategkob:hover .kingachieve{
  transform: translate(0, 0);
}

Веб разработчик изначально на demo странице можете все просмотреть, как все в реальности или после установки выглядит. Где выставлял картинку, что с изображением также в аналогичном способе работает.

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

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

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

26 Февраля 2019 Загрузок: 1 Просмотров: 1340 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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