• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура HTML элемента » Набор hover-эффекты CSS для изображений (Красивые hover-эффекты для изображений на чистом CSS3)
Набор hover-эффекты CSS для изображений
Kosten
Дата: Воскресенье, 2020-03-29, 03:39 | Сообщение 1
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


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

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

В этом материале собраны несколько классных CSS3 эффектов наведения мыши. Поскольку все эти эффекты при наведении доступны в коде, вы можете легко добавить их на свой веб-сайт или в другие веб-проекты.



HTML

Код
<figure class="snip1350 yellow">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample59.jpg" alt="sample59" /><i class="ion-chatboxes"></i>
  <a href="#"></a>
</figure>
<figure class="snip1350 blue hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample60.jpg" alt="sample60" /><i class="ion-checkmark"></i>
  <a href="#"></a>
</figure>
<figure class="snip1350 red"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg" alt="sample73" /><i class="ion-search"></i>
  <a href="#"></a>
</figure>

CSS

Код
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip1350 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1350 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.snip1350 img {
  max-width: 100%;
  vertical-align: top;
}
figure.snip1350 i {
  position: absolute;
  top: 0%;
  left: 50%;
  border-radius: 50%;
  font-size: 34px;
  color: #000000;
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  z-index: 1;
  opacity: 0;
}
figure.snip1350 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1350:after {
  background: #000000;
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  opacity: 0.7;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.snip1350.blue:after {
  background-color: #2472a4;
}
figure.snip1350.blue i {
  color: #20638f;
}
figure.snip1350.red:after {
  background-color: #ab3326;
}
figure.snip1350.red i {
  color: #962d22;
}
figure.snip1350.yellow:after {
  background-color: #e08e0b;
}
figure.snip1350.yellow i {
  color: #c87f0a;
}
figure.snip1350.green:after {
  background-color: #229955;
}
figure.snip1350.green i {
  color: #1e8449;
}
figure.snip1350.orange:after {
  background-color: #d67118;
}
figure.snip1350.orange i {
  color: #bf6516;
}
figure.snip1350.navy:after {
  background-color: #2b3c4e;
}
figure.snip1350.navy i {
  color: #222f3d;
}
figure.snip1350:hover i,
figure.snip1350.hover i {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  opacity: 1;
  transition: all 400ms 0ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
figure.snip1350:hover:after,
figure.snip1350.hover:after {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

JS

Код
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);

Этот js идет на один материал на всех вариаций, что находится по центру.

Демонстрация
Прикрепления: 1image-hover.zip(4.3 Kb) · 0277660.jpg(16.3 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-03-29, 03:45 | Сообщение 2
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


Однако, по мере развития различных веб-технологий, основные вещи в Интернете также изменились. И эффект парения здесь не исключение. Благодаря новейшим технологиям, таким как изображения CSS3, LESS и SVG, мы наблюдаем некоторые существенные изменения в эффектах наведения.


See the Pen
Вторая версия 2- Image Hover
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 2image-hover.zip(4.3 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-03-29, 03:47 | Сообщение 3
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


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


See the Pen
Третья 3 - Image Hover
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 3image-hover.zip(4.3 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-03-29, 03:50 | Сообщение 4
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


Классных CSS3 эффектов наведения мыши. Поскольку все эти эффекты при наведении доступны в коде, вы можете легко добавить их на свой веб-сайт или в другие веб-проекты.


See the Pen
четыре 4 - Image hover
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 4image-hover.zip(4.3 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-03-29, 03:52 | Сообщение 5
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


Заголовок изображения с подчеркиванием при наведении


See the Pen
5 - Image Hover
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 5image-hover.zip(4.2 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-03-29, 03:56 | Сообщение 6
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


Взгляните на эти прекрасные эффекты HTML CSS3 с кодом jquery для изменения вашего старого выпадающего списка с помощью этого уникального набора.

Наведение изображения с одной иконкой


See the Pen
6- Image hover with single icon
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 6image-hover-wi.zip(4.6 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-03-29, 03:58 | Сообщение 7
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


Большинство современных браузеров позволяют без проблем запускать код jquery на них. Мы можем найти множество специальных эффектов, созданных для html-сайтов, с помощью css.

Изображение с иконкой при наведении


See the Pen
7 - Image with icon on hover
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 7image-with-ico.zip(4.5 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-03-29, 04:01 | Сообщение 8
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


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

Изображение при наведении на иконку


See the Pen
8- Image hover with single icons
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 8image-hover-wi.zip(4.5 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-03-29, 04:04 | Сообщение 9
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


Современным веб-сайтам нужны простые и отзывчивые навигационные меню, которые имеют действительный код CSS3, HTML5.

Эффект наведения изображения со значком


See the Pen
9- Image hover effect with icon
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 9image-hover-ef.zip(4.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура HTML элемента » Набор hover-эффекты CSS для изображений (Красивые hover-эффекты для изображений на чистом CSS3)
  • Страница 1 из 1
  • 1
Поиск: