ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект изображение игральных карт на CSS

Эффект изображение игральных карт на CSS

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

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

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

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

Красивый эффект при наведение курсора на изображение

Красивый эффект при наведение курсора на изображение

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

HTML

Код

<div class="busitalsep-rovidekome">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/dunilag.png" class="minaden" />
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/dunilag.png" class="minaden" />
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/dunilag.png" class="minaden" />
  <a class="usacoptanuc-asetsekoms" href="#">
  Перейти
  </a>
</div>

CSS

Код

img{
  border: 1px solid #c3bcbc;
  padding: 3px;
  box-shadow: 0 0 5px #2f2d2d;

}

.busitalsep-rovidekome{
  max-width: 195px;
  max-height: 195px;
  margin: 47px;
}
.minaden{
  background: #fff;
  position: absolute;

  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.pix:nth:child(1){
  z-index: 3;
}
.minaden:nth-child(2){
  z-index: 1;
}
.minaden:nth-child(3){
  z-index: 2;
}
.busitalsep-rovidekome:hover .minaden:nth-child(1)
{
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);

  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.busitalsep-rovidekome:hover .minaden:nth-child(2){
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);

  -webkit-transition: all 0.10s ease;
  transition: all 0.10s ease;
}

.busitalsep-rovidekome:hover .minaden:nth-child(3){
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.usacoptanuc-asetsekoms{
  background: #2ca036;
  padding: 10px 15px;
  color: #f5f5f5;
  font-size: 14px;
  position: relative;
  z-index: 9;
  top:90px;
  left: 198px;

  -webkit-border-radius: 2px;
  border-radius: 2px;

  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;

  -webkit-opacity: 0;
  opacity: 0;

}
.usacoptanuc-asetsekoms:hover{
  background: #185a21;
}
.busitalsep-rovidekome:hover .usacoptanuc-asetsekoms{
  left:225px;

  -webkit-opacity: 1;
  opacity: 1;
}

Вся настройка производится в стилистике CSS, это от цвета и выстраиваемой скорости.

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

06 Сентября 2018 Просмотров: 3046 Комментариев: (0)

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

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

Kosten

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