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

Угловой фон hover-эффекта изображений

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

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

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

Как пример с тестового сайта:

По умолчанию, где открываем страницу или сайт:

Hover-эффекты для изображений на чистом CSS3

Hover-эффекты для изображений на чистом CSS3

Появление кнопки с фоном, это когда курсор находится на каркасе или снимке:

Угловой фоновой эффект для изображений

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

Ели еще не подключены шрифтовые иконки Awesome, то в CSS, в самый вверх устанавливаем стиль для вывода.

Код

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

Установочный процесс:

HTML

Код

CSS

Код

.avobrazhed-nachistom {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 8px 2%;
  min-width: 228px;
  max-width: 300px;
  width: 100%;
  color: #efe4e4;
  font-size: 17px;
  background-color: #191616;
  border: 3px solid #305173;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.nukidas {
  width: 100%;
height: 230px;
}

.avobrazhed-nachistom *,
.avobrazhed-nachistom *:before,
.avobrazhed-nachistom *:after {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.avobrazhed-nachistom img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}

.avobrazhed-nachistom i {
  position: absolute;
  line-height: 50px;
  width: 50px;
  text-align: center;
  font-size: 28px;
  z-index: 1;
  top: 0;
  right: 0;
  -webkit-transform: translate(100%, -100%);
  transform: translate(100%, -100%);
}

.avobrazhed-nachistom i:after {
  position: absolute;
  top: 3px;
  right: 3px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 75px 75px 0;
  border-color: transparent #34495e transparent;
  z-index: -1;
}

.avobrazhed-nachistom a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.avobrazhed-nachistom:hover img,
.avobrazhed-nachistom.hover img {
  zoom: 1;
  filter: alpha(opacity=70);
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.avobrazhed-nachistom:hover i,
.avobrazhed-nachistom.hover i {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

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

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

10 Августа 2019 Загрузок: 1 Просмотров: 888 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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