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

6 hover-эффекта CSS3 для изображение

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

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

Поместив четыре изображения одно поверх другого, вы можете сделать видимым только первое изображение transform: rotate() и использовать его, чтобы второе изображение выглядело иначе, добавляя различные повороты ко второму и последующим изображениям.

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

Но разве только:

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

Вот как выглядит эта вариация:

Эффекты для изображение при наведение клика

Также есть другие, как пример они больше веером идут:

Красивый эффекты для картинок на чистом CSS

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

HTML

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

Код

CSS

Код

ul {
  margin: -120px 60px 0;
  padding: 0;
  list-style: none;
}
ul li {
  margin-top: 120px;
}
@media only screen and (min-width: 600px) {
  ul {
  display: flex;
  flex-wrap: wrap;
  margin: -120px 0 0;
  padding: 0;
  list-style: none;
  }
  ul li {
  width: calc(50% - 120px);
  margin: 120px 60px 0;
  }
}
@media only screen and (min-width: 960px) {
  ul {
  margin: -120px 0 0;
  }
  ul li {
  width: calc(33.33334% - 120px);
  margin: 120px 60px 0;
  }
}

.dusiacoun-sepavedicem- {
  position: relative;
  display: block;
}
.dusiacoun-sepavedicem- {
  position: relative;
  display: block;
}
.dusiacoun-sepavedicem- img {
  width: 100%;
  vertical-align: bottom;
  transition: .3s;
}
.dusiacoun-sepavedicem- img:not(:nth-child(1)) {
  position: absolute;
  top: 0;
  left: 0;
}
.dusiacoun-sepavedicem- img:nth-child(1) {
  position: relative;
  z-index: 4;
}
.dusiacoun-sepavedicem- img:nth-child(2) {
  z-index: 3;
}
.dusiacoun-sepavedicem- img:nth-child(3) {
  z-index: 2;
}
.dusiacoun-sepavedicem- img:nth-child(4) {
  z-index: 1;
}

.dusiacoun-sepavedicem-01:hover img:nth-child(2) {
  transform: rotate(-4deg);
}
.dusiacoun-sepavedicem-01:hover img:nth-child(3) {
  transform: rotate(12deg);
}
.dusiacoun-sepavedicem-01:hover img:nth-child(4) {
  transform: rotate(-12deg);
}

.dusiacoun-sepavedicem-02:hover img:nth-child(2) {
  transform: translate(15px, -15px);
}
.dusiacoun-sepavedicem-02:hover img:nth-child(3) {
  transform: translate(30px, -30px);
}
.dusiacoun-sepavedicem-02:hover img:nth-child(4) {
  transform: translate(45px, -45px);
}

.dusiacoun-sepavedicem-03 img:not(:nth-child(1)) {
  transform-origin: 50% 0;
}
.dusiacoun-sepavedicem-03:hover img:nth-child(2) {
  transform: translateY(-15px) scale(.95);
}
.dusiacoun-sepavedicem-03:hover img:nth-child(3) {
  transform: translateY(-30px) scale(.9);
}
.dusiacoun-sepavedicem-03:hover img:nth-child(4) {
  transform: translateY(-45px) scale(.85);
}

.dusiacoun-sepavedicem-04 img:nth-child(2),
.dusiacoun-sepavedicem-04 img:nth-child(3) {
  z-index: 3;
}
.dusiacoun-sepavedicem-04 img:nth-child(4),
.dusiacoun-sepavedicem-04 img:nth-child(5) {
  z-index: 2;
}
.dusiacoun-sepavedicem-04 img:nth-child(6),
.dusiacoun-sepavedicem-04 img:nth-child(7) {
  z-index: 1;
}
.dusiacoun-sepavedicem-04:hover img:nth-child(2) {
  transform: translateX(-30px) scale(.9);
}
.dusiacoun-sepavedicem-04:hover img:nth-child(3) {
  transform: translateX(30px) scale(.9);
}
.dusiacoun-sepavedicem-04:hover img:nth-child(4) {
  transform: translateX(-60px) scale(.8);
}
.dusiacoun-sepavedicem-04:hover img:nth-child(5) {
  transform: translateX(60px) scale(.8);
}
.dusiacoun-sepavedicem-04:hover img:nth-child(6) {
  transform: translateX(-90px) scale(.7);
}
.dusiacoun-sepavedicem-04:hover img:nth-child(7) {
  transform: translateX(90px) scale(.7);
}

.dusiacoun-sepavedicem-05:hover img:nth-child(1) {
  transform: rotate(5deg);
}
.dusiacoun-sepavedicem-05:hover img:nth-child(2) {
  transform: translate(20px, -20px) rotate(9deg);
}
.dusiacoun-sepavedicem-05:hover img:nth-child(3) {
  transform: translate(40px, -40px) rotate(13deg);
}
.dusiacoun-sepavedicem-05:hover img:nth-child(4) {
  transform: translate(60px, -60px) rotate(17deg);
}

.dusiacoun-sepavedicem-06 img:nth-child(1) {
  transform-origin: 0 0;
}
.dusiacoun-sepavedicem-06 img:nth-child(2) {
  transform-origin: 100% 0;
}
.dusiacoun-sepavedicem-06 img:nth-child(3) {
  transform-origin: 0 100%;
}
.dusiacoun-sepavedicem-06 img:nth-child(4) {
  transform-origin: 100% 100%;
}
.dusiacoun-sepavedicem-06:hover img {
  transform: scale(.49);
}

Устанавливается на основе стиля, показанного ниже, и вы можете реализовать каждое движение, добавив или изменив код реализации каждой представленной здесь анимации.

Также можете при реализации добавить следующий CSS-код к базовому стилю transform-origin, где нужно указать позицию отображения каждого изображения transform: scale() для изменение размера.

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

25 Мая 2019 Загрузок: 1 Просмотров: 1026 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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